@hjmds/react 1.31.0 → 1.32.1

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":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,2DAA2D,CAAC;AAC7F,OAAO,EAAE,UAAU,EAAE,UAAU,EAA6F,MAAM,OAAO,CAAC;AAC1I,OAAO,EAAE,MAAM,EAAoC,MAAM,cAAc,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AA+BlE,SAAS,MAAM,CAAC,EAAE,MAAM,EAAE,IAAI,EAAiD;IAC7E,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE;QAAE,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;IAC1F,OAAO,KAAC,MAAM,IAAC,GAAG,EAAE,MAAM,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,IAAI,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,IAAI,QAAQ,EACrH,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,IAAI,KAAK,gBAC/C,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,IAAI,MAAM,CAAC,kBAAkB,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,kBAAkB,YACxH,MAAM,CAAC,KAAK,GACN,CAAC;AACZ,CAAC;AAED,SAAS,QAAQ,CAAC,KAAkC;IAClD,OAAO,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,OAAO,IAAI,KAAK,IAAI,SAAS,IAAI,KAAK,CAAC;AAC/F,CAAC;AAED,wGAAwG;AACxG,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAAiC,SAAS,SAAS,CAAC,EACrF,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,kBAAkB,EAAE,cAAc,GAAG,CAAC,EACnF,QAAQ,GAAG,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,EAC3D,EAAE,GAAG;IACJ,MAAM,KAAK,GAAG,mBAAmB,EAAE,CAAC;IACpC,MAAM,cAAc,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IACvD,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,cAAc,GAAG,CAAC;QAAE,MAAM,IAAI,UAAU,CAAC,+CAA+C,CAAC,CAAC;IAClI,OAAO,kBAAS,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,OAAO,gBAAa,kBAAkB,EAC1E,SAAS,EAAE,UAAU,CAAC,gBAAgB,EAAE,SAAS,CAAC,mBAAiB,QAAQ,oBAC3D,cAAc,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,qBAC3C,gBAAgB,CAAC,KAAK,EAAE,WAAW,CAAC,SAAS,IAAI,CAAC,CAAC,EACpE,KAAK,EAAE;YACL,6BAA6B,EAAE,GAAG,eAAe,CAAC,SAAS,IAAI;YAC/D,iCAAiC,EAAE,GAAG,eAAe,CAAC,iBAAiB,IAAI;YAC3E,8BAA8B,EAAE,GAAG,eAAe,CAAC,UAAU,IAAI;YACjE,iCAAiC,EAAE,GAAG,eAAe,CAAC,aAAa,IAAI;YACvE,sBAAsB,EAAE,GAAG,eAAe,CAAC,GAAG,IAAI;YAClD,oCAAoC,EAAE,GAAG,eAAe,CAAC,eAAe,IAAI;YAC5E,4BAA4B,EAAE,GAAG,cAAc,IAAI,EAAE,GAAG,KAAK,EAAE,GAAG,WAAW;SAC7D,aACjB,WAAW,CAAC,CAAC,CAAC,YAAG,SAAS,EAAC,6BAA6B,YAAE,WAAW,GAAK,CAAC,CAAC,CAAC,IAAI,EAClF,eAAK,SAAS,EAAC,yBAAyB,aACrC,eAAe,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,2BAA2B,YAAE,QAAQ,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAC,MAAM,IAAC,MAAM,EAAE,eAAe,EAAE,IAAI,EAAC,WAAW,GAAG,CAAC,CAAC,CAAC,eAAe,GAAO,EACvL,cAAK,SAAS,EAAC,yBAAyB,YAAC,KAAC,MAAM,IAAC,MAAM,EAAE,aAAa,EAAE,IAAI,EAAC,SAAS,GAAG,GAAM,IAC3F,IACF,CAAC;AACT,CAAC,CAAC,CAAC","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

@@ -6,7 +6,10 @@ export type BottomNavigationInsetProviderProps = Readonly<{
 }>;
 /** 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. */
+/**
+ * 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>;

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

@@ -22,7 +22,10 @@ export function BottomNavigationInsetProvider({ children }) {
     }, []);
     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. */
+/**
+ * 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);
 }
@@ -93,6 +96,11 @@ function BottomNavigationInner({ descriptor, configuration = {}, getHref, render
     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.
@@ -125,7 +133,7 @@ function BottomNavigationInner({ descriptor, configuration = {}, getHref, render
     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, dir: presentation.direction, style: {
+        }, "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,
@@ -143,6 +151,14 @@ function BottomNavigationInner({ descriptor, configuration = {}, getHref, render
             "--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) => {

package/dist/bottom-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"bottom-navigation.js","sourceRoot":"","sources":["../src/bottom-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  resolveBottomNavigationActivation,\n  resolveBottomNavigationConfiguration,\n  resolveBottomNavigationDescriptor,\n  validateBottomNavigationProminence,\n  type BottomNavigationActivation,\n  type BottomNavigationConfiguration,\n  type BottomNavigationDescriptor,\n  type ResolvedBottomNavigationItemDescriptor,\n} from \"@hjmds/design-contracts/components/bottom-navigation\";\nimport {\n  bottomNavigationRecipe,\n  iconRecipe,\n} from \"@hjmds/design-contracts/recipes\";\nimport {\n  createContext,\n  forwardRef,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type AnchorHTMLAttributes,\n  type CSSProperties,\n  type ForwardedRef,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n  type RefAttributes,\n} from \"react\";\nimport { assignRef, classNames } from \"./internal.js\";\nimport type { HjmCompositionStyleProp } from \"./composition-style.js\";\nimport { useOptionalHjmTheme } from \"./provider.js\";\n\nconst virtualKeyboardMinimumOcclusion = 120;\n\n/**\n * Height of the viewport bottom covered by the fixed bar (safe area and a raised center circle included); 0 when\n * there is no bar or it is hidden for the keyboard. The provider also exposes it as `--hjm-bottom-navigation-inset`,\n * which ScreenLayout's last region adds to its bottom padding, so products stop hand-keeping a bottom spacer\n * (2026-10-18; Native shares the same API for its `placement=\"overlay\"` bar).\n */\nconst BottomNavigationInsetContext = createContext(0);\nconst BottomNavigationInsetReporterContext = createContext<((height: number) => void) | null>(null);\n\nexport type BottomNavigationInsetProviderProps = Readonly<{ children: ReactNode }>;\n\n/** Wrap the app shell that holds both the screens and the BottomNavigation. */\nexport function BottomNavigationInsetProvider({ children }: BottomNavigationInsetProviderProps) {\n  const [inset, setInset] = useState(0);\n  const report = useMemo(() => (height: number) => {\n    const next = Number.isFinite(height) && height > 0 ? height : 0;\n    setInset(current => current === next ? current : next);\n  }, []);\n  return (\n    <BottomNavigationInsetReporterContext.Provider value={report}>\n      <BottomNavigationInsetContext.Provider value={inset}>\n        {/* `display: contents` adds no box; the custom property still inherits to every screen below. */}\n        <div style={{ display: \"contents\", \"--hjm-bottom-navigation-inset\": `${inset}px` } as CSSProperties}>{children}</div>\n      </BottomNavigationInsetContext.Provider>\n    </BottomNavigationInsetReporterContext.Provider>\n  );\n}\n\n/** Bottom height covered by the BottomNavigation inside the nearest provider; 0 outside one. */\nexport function useBottomNavigationInset(): number {\n  return useContext(BottomNavigationInsetContext);\n}\n\nexport type BottomNavigationIconRenderProps<\n  Key extends string = string,\n  IconName extends string = string,\n> = Readonly<{\n  item: ResolvedBottomNavigationItemDescriptor<Key, IconName>;\n  name: IconName;\n  selected: boolean;\n  color: \"currentColor\";\n  size: number;\n  strokeWidth: number;\n  scale: number;\n}>;\n\nexport type BottomNavigationLinkRenderProps = AnchorHTMLAttributes<HTMLAnchorElement> &\n  Readonly<{\n    href: string;\n    children: ReactNode;\n    \"data-state\": \"idle\" | \"selected\";\n  }>;\n\nexport type BottomNavigationProps<\n  Key extends string = string,\n  IconName extends string = string,\n> = Omit<\n  HTMLAttributes<HTMLElement>,\n  \"aria-label\" | \"aria-labelledby\" | \"children\" | \"dir\" | \"onChange\" | \"role\"\n> &\n  Readonly<{\n    descriptor: BottomNavigationDescriptor<Key, IconName>;\n    configuration?: BottomNavigationConfiguration;\n    getHref: (item: ResolvedBottomNavigationItemDescriptor<Key, IconName>) => string;\n    renderIcon: (props: BottomNavigationIconRenderProps<Key, IconName>) => ReactNode;\n    /** Framework navigation adapter, for example Next.js Link. */\n    renderLink?: (props: BottomNavigationLinkRenderProps) => ReactElement;\n    primaryAction?: ReactNode;\n    onActivate?: (activation: BottomNavigationActivation<Key>) => void;\n    /** Canonical layout-only placement on the root element. Controlled visual keys are excluded. */\n    layoutStyle?: HjmCompositionStyleProp;\n  }>;\n\nexport function isUnmodifiedPrimaryBottomNavigationClick(\n  event: Pick<\n    MouseEvent<HTMLAnchorElement>,\n    \"altKey\" | \"button\" | \"ctrlKey\" | \"defaultPrevented\" | \"metaKey\" | \"shiftKey\"\n  >,\n): boolean {\n  return (\n    !event.defaultPrevented &&\n    event.button === 0 &&\n    !event.metaKey &&\n    !event.ctrlKey &&\n    !event.shiftKey &&\n    !event.altKey\n  );\n}\n\nexport function shouldHideBottomNavigationForKeyboard(input: Readonly<{\n  behavior: \"hide\" | \"remain\";\n  layoutViewportHeight: number;\n  visualViewportHeight: number;\n  visualViewportOffsetTop?: number;\n  visualViewportScale?: number;\n}>): boolean {\n  if (input.behavior !== \"hide\") return false;\n  if ((input.visualViewportScale ?? 1) !== 1) return false;\n  const visibleBottom =\n    input.visualViewportHeight + (input.visualViewportOffsetTop ?? 0);\n  return layoutViewportHeightIsValid(input.layoutViewportHeight) &&\n    input.layoutViewportHeight - visibleBottom >= virtualKeyboardMinimumOcclusion;\n}\n\nfunction layoutViewportHeightIsValid(value: number): boolean {\n  return Number.isFinite(value) && value >= 0;\n}\n\nexport function getBottomNavigationGridColumn(\n  index: number,\n  itemCount: number,\n  distribution: \"equal\" | \"center-gap\",\n): number | undefined {\n  if (distribution !== \"center-gap\") return undefined;\n  const middle = itemCount / 2;\n  return index < middle ? index + 1 : index + 2;\n}\n\nfunction useKeyboardHidden(behavior: \"hide\" | \"remain\"): boolean {\n  const [hidden, setHidden] = useState(false);\n  useEffect(() => {\n    const viewport = window.visualViewport;\n    if (!viewport) return;\n    const update = () => {\n      setHidden(\n        shouldHideBottomNavigationForKeyboard({\n          behavior,\n          layoutViewportHeight: window.innerHeight,\n          visualViewportHeight: viewport.height,\n          visualViewportOffsetTop: viewport.offsetTop,\n          visualViewportScale: viewport.scale,\n        }),\n      );\n    };\n    update();\n    viewport.addEventListener(\"resize\", update);\n    viewport.addEventListener(\"scroll\", update);\n    return () => {\n      viewport.removeEventListener(\"resize\", update);\n      viewport.removeEventListener(\"scroll\", update);\n    };\n  }, [behavior]);\n  return hidden;\n}\n\nfunction BottomNavigationInner<\n  Key extends string = string,\n  IconName extends string = string,\n>(\n  {\n    descriptor,\n    configuration = {},\n    getHref,\n    renderIcon,\n    renderLink,\n    primaryAction,\n    onActivate,\n    className,\n    style,\n    layoutStyle,\n    ...props\n  }: BottomNavigationProps<Key, IconName>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const resolved = resolveBottomNavigationDescriptor(descriptor);\n  const theme = useOptionalHjmTheme();\n  const direction = configuration.direction ?? theme?.environment.direction;\n  const presentation = resolveBottomNavigationConfiguration(\n    {\n      ...configuration,\n      ...(direction === undefined ? {} : { direction }),\n    },\n    resolved.items.length,\n  );\n  validateBottomNavigationProminence(resolved.items, presentation);\n  const hidden = useKeyboardHidden(presentation.keyboardBehavior);\n  const density = bottomNavigationRecipe.density[presentation.density];\n  const presentationRecipe =\n    bottomNavigationRecipe.presentations[presentation.presentation];\n  const centerGap =\n    bottomNavigationRecipe.distributions[presentation.distribution].centerGap;\n  const iconSize = presentation.iconSize === \"standard\"\n    ? iconRecipe.sizes[density.icon]\n    : bottomNavigationRecipe.iconSizes[presentation.iconSize];\n  const prominentRecipe = bottomNavigationRecipe.prominentDestination;\n  // Lifting by (diameter - indicator height) keeps the prominent label on the other labels' line; an app-icon\n  // slot taller than the indicator minimum raises that height.\n  const prominentLift = prominentRecipe.diameter - Math.max(bottomNavigationRecipe.indicator.minHeight, iconSize);\n  // The part of the circle above the nav box still covers content, so the reported inset includes it.\n  const prominentOverflow = resolved.items.some((item) => item.prominent)\n    ? Math.max(0, prominentLift - density.padding - presentationRecipe.outerPaddingTop)\n    : 0;\n  const navRef = useRef<HTMLElement | null>(null);\n  const reportInset = useContext(BottomNavigationInsetReporterContext);\n  useEffect(() => {\n    const nav = navRef.current;\n    if (!reportInset) return;\n    if (hidden || !nav) {\n      reportInset(0);\n      return;\n    }\n    const update = () => reportInset(nav.getBoundingClientRect().height + prominentOverflow);\n    update();\n    const observer = new ResizeObserver(update);\n    observer.observe(nav);\n    return () => {\n      observer.disconnect();\n      reportInset(0);\n    };\n  }, [reportInset, hidden, prominentOverflow]);\n\n  if (hidden) return null;\n\n  return (\n    <nav\n      {...props}\n      ref={(node) => {\n        navRef.current = node;\n        assignRef(ref, node);\n      }}\n      aria-label={resolved.accessibilityLabel}\n      className={classNames(\"hjm-bottom-navigation\", className)}\n      data-expanded-labels={(theme?.environment.textScale ?? 1) >= 1.5 || resolved.items.length > 4 ? \"true\" : \"false\"}\n      data-density={presentation.density}\n      data-distribution={presentation.distribution}\n      data-keyboard-behavior={presentation.keyboardBehavior}\n      data-labels={presentation.labels}\n      data-selection={presentation.selection}\n      data-surface={presentation.surface}\n      data-presentation={presentation.presentation}\n      dir={presentation.direction}\n      style={{\n        \"--hjm-bottom-navigation-center-gap\": `${centerGap}px`,\n        \"--hjm-bottom-navigation-columns\": resolved.items.length,\n        \"--hjm-bottom-navigation-half-columns\": resolved.items.length / 2,\n        \"--hjm-bottom-navigation-item-gap\": `${density.gap}px`,\n        \"--hjm-bottom-navigation-item-min-height\": `${density.itemMinHeight}px`,\n        \"--hjm-bottom-navigation-item-min-width\": `${density.itemMinWidth}px`,\n        \"--hjm-bottom-navigation-item-padding\": `${density.padding}px`,\n        \"--hjm-bottom-navigation-max-width\": presentationRecipe.maxWidth\n          ? `${presentationRecipe.maxWidth}px`\n          : \"none\",\n        \"--hjm-bottom-navigation-content-max-width\": presentationRecipe.contentMaxWidth\n          ? `${presentationRecipe.contentMaxWidth}px`\n          : \"none\",\n        \"--hjm-bottom-navigation-outer-inline\": `${presentationRecipe.outerPaddingHorizontal}px`,\n        \"--hjm-bottom-navigation-outer-top\": `${presentationRecipe.outerPaddingTop}px`,\n        \"--hjm-bottom-navigation-prominent-diameter\": `${prominentRecipe.diameter}px`,\n        \"--hjm-bottom-navigation-prominent-lift\": `${prominentLift}px`,\n        ...style,\n        ...layoutStyle,\n      } as CSSProperties}\n    >\n      <div className=\"hjm-bottom-navigation__surface\">\n        <ul className=\"hjm-bottom-navigation__list\">\n          {resolved.items.map((item, index) => {\n            const selected = item.id === resolved.selectedKey;\n            const content = (\n              <>\n                <span\n                  aria-hidden=\"true\"\n                  className=\"hjm-bottom-navigation__indicator\"\n                  data-state={selected ? \"selected\" : \"idle\"}\n                >\n                  {renderIcon({\n                    item,\n                    name: item.icon.name,\n                    selected,\n                    color: \"currentColor\",\n                    size: item.prominent ? iconRecipe.sizes[prominentRecipe.icon] : iconSize,\n                    strokeWidth: selected\n                      ? bottomNavigationRecipe.icon.selectedEmphasis.strokeWidth.selected\n                      : bottomNavigationRecipe.icon.selectedEmphasis.strokeWidth.idle,\n                    scale: selected\n                      ? bottomNavigationRecipe.icon.selectedEmphasis.scale.selected\n                      : bottomNavigationRecipe.icon.selectedEmphasis.scale.idle,\n                  })}\n                  {item.badge ? (\n                    <span aria-hidden=\"true\" className=\"hjm-bottom-navigation__badge\">\n                      {item.badge.visibleLabel}\n                    </span>\n                  ) : null}\n                </span>\n                {/* Hidden labels are not rendered: the item link already carries\n                    resolvedAccessibilityLabel, so a visually-hidden copy would only duplicate it. */}\n                {presentation.labels === \"visible\" ? (\n                  <span className=\"hjm-bottom-navigation__label\">{item.label}</span>\n                ) : null}\n              </>\n            );\n            const itemStyle = {\n              gridColumn: getBottomNavigationGridColumn(\n                index,\n                resolved.items.length,\n                presentation.distribution,\n              ),\n            };\n            if (item.disabled) {\n              return (\n                <li key={item.id} style={itemStyle} data-selected=\"false\" data-prominent={item.prominent || undefined}>\n                  <span\n                    aria-disabled=\"true\"\n                    aria-label={item.resolvedAccessibilityLabel}\n                    className=\"hjm-bottom-navigation__item\"\n                    data-state=\"disabled\"\n                    role=\"link\"\n                  >\n                    {content}\n                  </span>\n                </li>\n              );\n            }\n            const href = getHref(item);\n            if (!href.trim()) {\n              throw new TypeError(`BottomNavigation href must not be empty: ${item.id}`);\n            }\n            const linkProps: BottomNavigationLinkRenderProps = {\n              \"aria-current\": selected ? \"page\" : undefined,\n              \"aria-label\": item.resolvedAccessibilityLabel,\n              className: \"hjm-bottom-navigation__item\",\n              \"data-state\": selected ? \"selected\" : \"idle\",\n              href,\n              onClick: (event) => {\n                if (!isUnmodifiedPrimaryBottomNavigationClick(event)) return;\n                const activation = resolveBottomNavigationActivation(descriptor, item.id);\n                if (activation) onActivate?.(activation);\n              },\n              children: content,\n            };\n            return (\n              <li key={item.id} style={itemStyle} data-selected={selected} data-prominent={item.prominent || undefined}>\n                {renderLink ? renderLink(linkProps) : <a {...linkProps} />}\n              </li>\n            );\n          })}\n        </ul>\n        {primaryAction ? (\n          <div className=\"hjm-bottom-navigation__primary-action\">{primaryAction}</div>\n        ) : null}\n      </div>\n    </nav>\n  );\n}\n\nexport const BottomNavigation = forwardRef(BottomNavigationInner) as <\n  Key extends string = string,\n  IconName extends string = string,\n>(\n  props: BottomNavigationProps<Key, IconName> & RefAttributes<HTMLElement>,\n) => ReactElement | null;\n"]}
+{"version":3,"file":"bottom-navigation.js","sourceRoot":"","sources":["../src/bottom-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  resolveBottomNavigationActivation,\n  resolveBottomNavigationConfiguration,\n  resolveBottomNavigationDescriptor,\n  validateBottomNavigationProminence,\n  type BottomNavigationActivation,\n  type BottomNavigationConfiguration,\n  type BottomNavigationDescriptor,\n  type ResolvedBottomNavigationItemDescriptor,\n} from \"@hjmds/design-contracts/components/bottom-navigation\";\nimport {\n  bottomNavigationRecipe,\n  iconRecipe,\n} from \"@hjmds/design-contracts/recipes\";\nimport {\n  createContext,\n  forwardRef,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type AnchorHTMLAttributes,\n  type CSSProperties,\n  type ForwardedRef,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n  type RefAttributes,\n} from \"react\";\nimport { assignRef, classNames } from \"./internal.js\";\nimport type { HjmCompositionStyleProp } from \"./composition-style.js\";\nimport { useOptionalHjmTheme } from \"./provider.js\";\n\nconst virtualKeyboardMinimumOcclusion = 120;\n\n/**\n * Height of the viewport bottom covered by the fixed bar (safe area and a raised center circle included); 0 when\n * there is no bar or it is hidden for the keyboard. The provider also exposes it as `--hjm-bottom-navigation-inset`,\n * which ScreenLayout's last region adds to its bottom padding, so products stop hand-keeping a bottom spacer\n * (2026-10-18; Native shares the same API for its `placement=\"overlay\"` bar).\n */\nconst BottomNavigationInsetContext = createContext(0);\nconst BottomNavigationInsetReporterContext = createContext<((height: number) => void) | null>(null);\n\nexport type BottomNavigationInsetProviderProps = Readonly<{ children: ReactNode }>;\n\n/** Wrap the app shell that holds both the screens and the BottomNavigation. */\nexport function BottomNavigationInsetProvider({ children }: BottomNavigationInsetProviderProps) {\n  const [inset, setInset] = useState(0);\n  const report = useMemo(() => (height: number) => {\n    const next = Number.isFinite(height) && height > 0 ? height : 0;\n    setInset(current => current === next ? current : next);\n  }, []);\n  return (\n    <BottomNavigationInsetReporterContext.Provider value={report}>\n      <BottomNavigationInsetContext.Provider value={inset}>\n        {/* `display: contents` adds no box; the custom property still inherits to every screen below. */}\n        <div style={{ display: \"contents\", \"--hjm-bottom-navigation-inset\": `${inset}px` } as CSSProperties}>{children}</div>\n      </BottomNavigationInsetContext.Provider>\n    </BottomNavigationInsetReporterContext.Provider>\n  );\n}\n\n/**\n * Bottom height covered by the BottomNavigation inside the nearest provider; 0 outside one. For layouts that are not\n * a ScreenLayout: inside one the shell already pads by it, so adding it again doubles the space.\n */\nexport function useBottomNavigationInset(): number {\n  return useContext(BottomNavigationInsetContext);\n}\n\nexport type BottomNavigationIconRenderProps<\n  Key extends string = string,\n  IconName extends string = string,\n> = Readonly<{\n  item: ResolvedBottomNavigationItemDescriptor<Key, IconName>;\n  name: IconName;\n  selected: boolean;\n  color: \"currentColor\";\n  size: number;\n  strokeWidth: number;\n  scale: number;\n}>;\n\nexport type BottomNavigationLinkRenderProps = AnchorHTMLAttributes<HTMLAnchorElement> &\n  Readonly<{\n    href: string;\n    children: ReactNode;\n    \"data-state\": \"idle\" | \"selected\";\n  }>;\n\nexport type BottomNavigationProps<\n  Key extends string = string,\n  IconName extends string = string,\n> = Omit<\n  HTMLAttributes<HTMLElement>,\n  \"aria-label\" | \"aria-labelledby\" | \"children\" | \"dir\" | \"onChange\" | \"role\"\n> &\n  Readonly<{\n    descriptor: BottomNavigationDescriptor<Key, IconName>;\n    configuration?: BottomNavigationConfiguration;\n    getHref: (item: ResolvedBottomNavigationItemDescriptor<Key, IconName>) => string;\n    renderIcon: (props: BottomNavigationIconRenderProps<Key, IconName>) => ReactNode;\n    /** Framework navigation adapter, for example Next.js Link. */\n    renderLink?: (props: BottomNavigationLinkRenderProps) => ReactElement;\n    primaryAction?: ReactNode;\n    onActivate?: (activation: BottomNavigationActivation<Key>) => void;\n    /** Canonical layout-only placement on the root element. Controlled visual keys are excluded. */\n    layoutStyle?: HjmCompositionStyleProp;\n  }>;\n\nexport function isUnmodifiedPrimaryBottomNavigationClick(\n  event: Pick<\n    MouseEvent<HTMLAnchorElement>,\n    \"altKey\" | \"button\" | \"ctrlKey\" | \"defaultPrevented\" | \"metaKey\" | \"shiftKey\"\n  >,\n): boolean {\n  return (\n    !event.defaultPrevented &&\n    event.button === 0 &&\n    !event.metaKey &&\n    !event.ctrlKey &&\n    !event.shiftKey &&\n    !event.altKey\n  );\n}\n\nexport function shouldHideBottomNavigationForKeyboard(input: Readonly<{\n  behavior: \"hide\" | \"remain\";\n  layoutViewportHeight: number;\n  visualViewportHeight: number;\n  visualViewportOffsetTop?: number;\n  visualViewportScale?: number;\n}>): boolean {\n  if (input.behavior !== \"hide\") return false;\n  if ((input.visualViewportScale ?? 1) !== 1) return false;\n  const visibleBottom =\n    input.visualViewportHeight + (input.visualViewportOffsetTop ?? 0);\n  return layoutViewportHeightIsValid(input.layoutViewportHeight) &&\n    input.layoutViewportHeight - visibleBottom >= virtualKeyboardMinimumOcclusion;\n}\n\nfunction layoutViewportHeightIsValid(value: number): boolean {\n  return Number.isFinite(value) && value >= 0;\n}\n\nexport function getBottomNavigationGridColumn(\n  index: number,\n  itemCount: number,\n  distribution: \"equal\" | \"center-gap\",\n): number | undefined {\n  if (distribution !== \"center-gap\") return undefined;\n  const middle = itemCount / 2;\n  return index < middle ? index + 1 : index + 2;\n}\n\nfunction useKeyboardHidden(behavior: \"hide\" | \"remain\"): boolean {\n  const [hidden, setHidden] = useState(false);\n  useEffect(() => {\n    const viewport = window.visualViewport;\n    if (!viewport) return;\n    const update = () => {\n      setHidden(\n        shouldHideBottomNavigationForKeyboard({\n          behavior,\n          layoutViewportHeight: window.innerHeight,\n          visualViewportHeight: viewport.height,\n          visualViewportOffsetTop: viewport.offsetTop,\n          visualViewportScale: viewport.scale,\n        }),\n      );\n    };\n    update();\n    viewport.addEventListener(\"resize\", update);\n    viewport.addEventListener(\"scroll\", update);\n    return () => {\n      viewport.removeEventListener(\"resize\", update);\n      viewport.removeEventListener(\"scroll\", update);\n    };\n  }, [behavior]);\n  return hidden;\n}\n\nfunction BottomNavigationInner<\n  Key extends string = string,\n  IconName extends string = string,\n>(\n  {\n    descriptor,\n    configuration = {},\n    getHref,\n    renderIcon,\n    renderLink,\n    primaryAction,\n    onActivate,\n    className,\n    style,\n    layoutStyle,\n    ...props\n  }: BottomNavigationProps<Key, IconName>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const resolved = resolveBottomNavigationDescriptor(descriptor);\n  const theme = useOptionalHjmTheme();\n  const direction = configuration.direction ?? theme?.environment.direction;\n  const presentation = resolveBottomNavigationConfiguration(\n    {\n      ...configuration,\n      ...(direction === undefined ? {} : { direction }),\n    },\n    resolved.items.length,\n  );\n  validateBottomNavigationProminence(resolved.items, presentation);\n  const hidden = useKeyboardHidden(presentation.keyboardBehavior);\n  const density = bottomNavigationRecipe.density[presentation.density];\n  const presentationRecipe =\n    bottomNavigationRecipe.presentations[presentation.presentation];\n  const centerGap =\n    bottomNavigationRecipe.distributions[presentation.distribution].centerGap;\n  const iconSize = presentation.iconSize === \"standard\"\n    ? iconRecipe.sizes[density.icon]\n    : bottomNavigationRecipe.iconSizes[presentation.iconSize];\n  // `shape` reframes the floating surface (radius + inner padding); `standard` keeps the presentation recipe.\n  const shapeRecipe = presentation.shape === \"standard\"\n    ? null\n    : bottomNavigationRecipe.shapes[presentation.shape];\n  const liftRecipe = bottomNavigationRecipe.icon.liftEmphasis;\n  const prominentRecipe = bottomNavigationRecipe.prominentDestination;\n  // Lifting by (diameter - indicator height) keeps the prominent label on the other labels' line; an app-icon\n  // slot taller than the indicator minimum raises that height.\n  const prominentLift = prominentRecipe.diameter - Math.max(bottomNavigationRecipe.indicator.minHeight, iconSize);\n  // The part of the circle above the nav box still covers content, so the reported inset includes it.\n  const prominentOverflow = resolved.items.some((item) => item.prominent)\n    ? Math.max(0, prominentLift - density.padding - presentationRecipe.outerPaddingTop)\n    : 0;\n  const navRef = useRef<HTMLElement | null>(null);\n  const reportInset = useContext(BottomNavigationInsetReporterContext);\n  useEffect(() => {\n    const nav = navRef.current;\n    if (!reportInset) return;\n    if (hidden || !nav) {\n      reportInset(0);\n      return;\n    }\n    const update = () => reportInset(nav.getBoundingClientRect().height + prominentOverflow);\n    update();\n    const observer = new ResizeObserver(update);\n    observer.observe(nav);\n    return () => {\n      observer.disconnect();\n      reportInset(0);\n    };\n  }, [reportInset, hidden, prominentOverflow]);\n\n  if (hidden) return null;\n\n  return (\n    <nav\n      {...props}\n      ref={(node) => {\n        navRef.current = node;\n        assignRef(ref, node);\n      }}\n      aria-label={resolved.accessibilityLabel}\n      className={classNames(\"hjm-bottom-navigation\", className)}\n      data-expanded-labels={(theme?.environment.textScale ?? 1) >= 1.5 || resolved.items.length > 4 ? \"true\" : \"false\"}\n      data-density={presentation.density}\n      data-distribution={presentation.distribution}\n      data-keyboard-behavior={presentation.keyboardBehavior}\n      data-labels={presentation.labels}\n      data-selection={presentation.selection}\n      data-surface={presentation.surface}\n      data-presentation={presentation.presentation}\n      data-shape={presentation.shape}\n      data-icon-emphasis={presentation.iconEmphasis}\n      dir={presentation.direction}\n      style={{\n        \"--hjm-bottom-navigation-center-gap\": `${centerGap}px`,\n        \"--hjm-bottom-navigation-columns\": resolved.items.length,\n        \"--hjm-bottom-navigation-half-columns\": resolved.items.length / 2,\n        \"--hjm-bottom-navigation-item-gap\": `${density.gap}px`,\n        \"--hjm-bottom-navigation-item-min-height\": `${density.itemMinHeight}px`,\n        \"--hjm-bottom-navigation-item-min-width\": `${density.itemMinWidth}px`,\n        \"--hjm-bottom-navigation-item-padding\": `${density.padding}px`,\n        \"--hjm-bottom-navigation-max-width\": presentationRecipe.maxWidth\n          ? `${presentationRecipe.maxWidth}px`\n          : \"none\",\n        \"--hjm-bottom-navigation-content-max-width\": presentationRecipe.contentMaxWidth\n          ? `${presentationRecipe.contentMaxWidth}px`\n          : \"none\",\n        \"--hjm-bottom-navigation-outer-inline\": `${presentationRecipe.outerPaddingHorizontal}px`,\n        \"--hjm-bottom-navigation-outer-top\": `${presentationRecipe.outerPaddingTop}px`,\n        \"--hjm-bottom-navigation-prominent-diameter\": `${prominentRecipe.diameter}px`,\n        \"--hjm-bottom-navigation-prominent-lift\": `${prominentLift}px`,\n        ...(shapeRecipe ? {\n          \"--hjm-bottom-navigation-shape-radius\": `var(--hjm-radius-${shapeRecipe.radius})`,\n          \"--hjm-bottom-navigation-shape-padding\": `${shapeRecipe.surfacePadding}px`,\n        } : {}),\n        ...(presentation.iconEmphasis === \"lift\" ? {\n          \"--hjm-bottom-navigation-lift-offset\": `${liftRecipe.translateY}px`,\n          \"--hjm-bottom-navigation-lift-idle-opacity\": liftRecipe.idleOpacity,\n        } : {}),\n        ...style,\n        ...layoutStyle,\n      } as CSSProperties}\n    >\n      <div className=\"hjm-bottom-navigation__surface\">\n        <ul className=\"hjm-bottom-navigation__list\">\n          {resolved.items.map((item, index) => {\n            const selected = item.id === resolved.selectedKey;\n            const content = (\n              <>\n                <span\n                  aria-hidden=\"true\"\n                  className=\"hjm-bottom-navigation__indicator\"\n                  data-state={selected ? \"selected\" : \"idle\"}\n                >\n                  {renderIcon({\n                    item,\n                    name: item.icon.name,\n                    selected,\n                    color: \"currentColor\",\n                    size: item.prominent ? iconRecipe.sizes[prominentRecipe.icon] : iconSize,\n                    strokeWidth: selected\n                      ? bottomNavigationRecipe.icon.selectedEmphasis.strokeWidth.selected\n                      : bottomNavigationRecipe.icon.selectedEmphasis.strokeWidth.idle,\n                    scale: selected\n                      ? bottomNavigationRecipe.icon.selectedEmphasis.scale.selected\n                      : bottomNavigationRecipe.icon.selectedEmphasis.scale.idle,\n                  })}\n                  {item.badge ? (\n                    <span aria-hidden=\"true\" className=\"hjm-bottom-navigation__badge\">\n                      {item.badge.visibleLabel}\n                    </span>\n                  ) : null}\n                </span>\n                {/* Hidden labels are not rendered: the item link already carries\n                    resolvedAccessibilityLabel, so a visually-hidden copy would only duplicate it. */}\n                {presentation.labels === \"visible\" ? (\n                  <span className=\"hjm-bottom-navigation__label\">{item.label}</span>\n                ) : null}\n              </>\n            );\n            const itemStyle = {\n              gridColumn: getBottomNavigationGridColumn(\n                index,\n                resolved.items.length,\n                presentation.distribution,\n              ),\n            };\n            if (item.disabled) {\n              return (\n                <li key={item.id} style={itemStyle} data-selected=\"false\" data-prominent={item.prominent || undefined}>\n                  <span\n                    aria-disabled=\"true\"\n                    aria-label={item.resolvedAccessibilityLabel}\n                    className=\"hjm-bottom-navigation__item\"\n                    data-state=\"disabled\"\n                    role=\"link\"\n                  >\n                    {content}\n                  </span>\n                </li>\n              );\n            }\n            const href = getHref(item);\n            if (!href.trim()) {\n              throw new TypeError(`BottomNavigation href must not be empty: ${item.id}`);\n            }\n            const linkProps: BottomNavigationLinkRenderProps = {\n              \"aria-current\": selected ? \"page\" : undefined,\n              \"aria-label\": item.resolvedAccessibilityLabel,\n              className: \"hjm-bottom-navigation__item\",\n              \"data-state\": selected ? \"selected\" : \"idle\",\n              href,\n              onClick: (event) => {\n                if (!isUnmodifiedPrimaryBottomNavigationClick(event)) return;\n                const activation = resolveBottomNavigationActivation(descriptor, item.id);\n                if (activation) onActivate?.(activation);\n              },\n              children: content,\n            };\n            return (\n              <li key={item.id} style={itemStyle} data-selected={selected} data-prominent={item.prominent || undefined}>\n                {renderLink ? renderLink(linkProps) : <a {...linkProps} />}\n              </li>\n            );\n          })}\n        </ul>\n        {primaryAction ? (\n          <div className=\"hjm-bottom-navigation__primary-action\">{primaryAction}</div>\n        ) : null}\n      </div>\n    </nav>\n  );\n}\n\nexport const BottomNavigation = forwardRef(BottomNavigationInner) as <\n  Key extends string = string,\n  IconName extends string = string,\n>(\n  props: BottomNavigationProps<Key, IconName> & RefAttributes<HTMLElement>,\n) => ReactElement | null;\n"]}

package/dist/evidence.d.ts

@@ -34,7 +34,7 @@ export type ReactRendererEvidenceManifest = Readonly<{
 export declare const reactRendererEvidence: {
     readonly schemaVersion: 2;
     readonly packageName: "@hjmds/react";
-    readonly packageVersion: "1.31.0";
+    readonly packageVersion: "1.32.1";
     readonly surface: "web";
     readonly components: Readonly<{
         /** Canonical component id from the design-contracts catalog. */

package/dist/evidence.js

@@ -134,7 +134,7 @@ const activeWebEntries = componentCatalog.filter((entry) => {
 export const reactRendererEvidence = {
     schemaVersion: reactRendererEvidenceSchemaVersion,
     packageName: "@hjmds/react",
-    packageVersion: "1.31.0",
+    packageVersion: "1.32.1",
     surface: "web",
     components: activeWebEntries.map(derivedClaim),
 };

package/dist/evidence.js.map

@@ -1 +1 @@
-{"version":3,"file":"evidence.js","sourceRoot":"","sources":["../src/evidence.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ShowcaseScenarioId } from \"@hjmds/design-contracts/showcase\";\nimport { getRequiredShowcaseEvidence } from \"@hjmds/design-contracts/showcase\";\nimport { componentCatalog, componentIdOf, getComponentSurfaceStatus, type ComponentCatalogEntry } from \"@hjmds/design-contracts/catalog\";\nimport { publicExportEntries } from \"./public-exports.generated.js\";\n\nexport const reactRendererEvidenceSchemaVersion = 2 as const;\n\nexport type ReactRendererEvidenceScenario = Exclude<ShowcaseScenarioId, \"contract\" | \"native-actions\">;\n\nexport type ReactRendererEvidenceComponent = Readonly<{\n  /** Canonical component id from the design-contracts catalog. */\n  componentId: string;\n  /** Public symbols that implement this contract on the declared subpath. */\n  exportNames: readonly string[];\n  /** Granular @hjmds/react export used by consumers. */\n  subpath: `./${string}`;\n  /** Scenarios supported by automated first-party renderer evidence. */\n  scenarios: readonly ReactRendererEvidenceScenario[];\n  /** Repository-local executable proof for every claimed scenario. */\n  proofs: readonly Readonly<{\n    scenarios: readonly ReactRendererEvidenceScenario[];\n    file: `test/${string}.test.tsx`;\n    caseId: string;\n  }>[];\n}>;\n\nexport type ReactRendererEvidenceManifest = Readonly<{\n  schemaVersion: typeof reactRendererEvidenceSchemaVersion;\n  packageName: \"@hjmds/react\";\n  packageVersion: string;\n  surface: \"web\";\n  components: readonly ReactRendererEvidenceComponent[];\n}>;\n\nconst defaultProofFile = \"test/default-render.ssr.test.tsx\" as const;\nconst matrixProofFile = \"test/scenario-matrix.browser.test.tsx\" as const;\nconst stableCoreProofFile = \"test/stable-core.browser.test.tsx\" as const;\n\ntype ProofFile = `test/${string}.test.tsx`;\n\n/**\n * Scenarios a component does not pass yet. Each entry is promotion debt that\n * the generated evidence projection reports; remove it when the component is\n * fixed and the matrix case passes. Stable surfaces cannot carry a gap\n * (scripts/check-workspace-sync.mjs).\n */\nconst webScenarioGaps: Readonly<Record<string, readonly ReactRendererEvidenceScenario[]>> = {};\n\n/**\n * Proofs that live outside the shared default/matrix files: keyboard behavior in a dedicated browser test,\n * long copy proven inside a portal by the component's own test, or a whole matrix run in a component file.\n * Everything else about a claim derives from the catalog row (2026-10-18 registration input).\n */\ntype ClaimExtras = Readonly<{\n  /** Extra proofs; their scenarios are removed from the shared matrix proof. */\n  proofs?: readonly Readonly<{ scenarios: readonly ReactRendererEvidenceScenario[]; file: ProofFile }>[];\n  /** Hooks or helpers published beside the component symbols on the same subpath. */\n  exportNames?: readonly string[];\n}>;\n\nconst keyboard = (file: ProofFile = stableCoreProofFile): ClaimExtras => ({ proofs: [{ scenarios: [\"keyboard\"], file }] });\nconst keyboardAndLongCopy = (file: ProofFile): ClaimExtras => ({ proofs: [{ scenarios: [\"keyboard\", \"long-copy\"], file }] });\n\nconst claimExtras: Readonly<Record<string, ClaimExtras>> = {\n  \"design-system-provider\": { exportNames: [\"useHjmTheme\"] },\n  layout: keyboard(),\n  link: keyboard(),\n  field: keyboard(),\n  \"search-field\": keyboard(),\n  \"password-field\": keyboard(),\n  \"otp-field\": keyboard(),\n  \"number-field\": keyboard(),\n  slider: keyboard(),\n  form: keyboard(\"test/form.keyboard.browser.test.tsx\"),\n  \"date-picker\": keyboard(),\n  calendar: keyboard(\"test/calendar.browser.test.tsx\"),\n  \"file-picker\": keyboard(\"test/file-picker.keyboard.browser.test.tsx\"),\n  checkbox: keyboard(),\n  \"checkbox-group\": keyboard(),\n  \"radio-group\": keyboard(),\n  switch: keyboard(),\n  \"segmented-control\": keyboard(),\n  chip: keyboard(),\n  tabs: keyboard(\"test/tabs.keyboard.browser.test.tsx\"),\n  breadcrumb: keyboard(\"test/page-navigation.browser.test.tsx\"),\n  pagination: keyboard(\"test/pagination.keyboard.browser.test.tsx\"),\n  popover: keyboardAndLongCopy(\"test/popover.browser.test.tsx\"),\n  \"side-panel\": keyboardAndLongCopy(\"test/side-panel.browser.test.tsx\"),\n  splitter: keyboard(\"test/splitter.browser.test.tsx\"),\n  tour: keyboardAndLongCopy(\"test/tour.browser.test.tsx\"),\n  tree: keyboard(\"test/tree.browser.test.tsx\"),\n  \"transfer-list\": keyboard(\"test/transfer-list.browser.test.tsx\"),\n  mentions: keyboard(\"test/mentions.browser.test.tsx\"),\n  \"command-palette\": keyboardAndLongCopy(\"test/command-palette.browser.test.tsx\"),\n  agreement: keyboard(\"test/agreement.keyboard.browser.test.tsx\"),\n  \"toggle-group\": keyboard(),\n  \"tags-input\": keyboard(),\n  \"skip-nav\": keyboardAndLongCopy(\"test/skip-nav.browser.test.tsx\"),\n  sidebar: keyboard(\"test/sidebar.browser.test.tsx\"),\n  \"date-range-picker\": keyboard(\"test/date-range.keyboard.browser.test.tsx\"),\n  \"auth-provider-button\": keyboard(),\n  \"data-table\": keyboard(\"test/data-table.keyboard.browser.test.tsx\"),\n  collapsible: keyboard(\"test/collapsible.keyboard.browser.test.tsx\"),\n  \"context-menu\": keyboardAndLongCopy(\"test/context-menu.interactions.browser.test.tsx\"),\n  menubar: keyboard(\"test/menubar.keyboard.browser.test.tsx\"),\n  anchor: keyboard(\"test/anchor.browser.test.tsx\"),\n  \"bottom-navigation\": keyboard(\"test/bottom-navigation.keyboard.browser.test.tsx\"),\n  \"load-more\": keyboard(\"test/load-more.interactions.browser.test.tsx\"),\n  carousel: keyboard(\"test/carousel.browser.test.tsx\"),\n  \"floating-action-button\": keyboard(),\n  accordion: keyboard(\"test/accordion.keyboard.browser.test.tsx\"),\n  \"upload-item\": keyboard(\"test/upload-item.browser.test.tsx\"),\n  // ThinkingOrb runs its whole environment matrix in its own file (canvas timing), not in scenario-matrix.\n  \"thinking-orb\": { proofs: [{ scenarios: [\"dark\", \"large-text\", \"rtl\", \"reduced-motion\", \"accessibility\"], file: \"test/thinking-orb.browser.test.tsx\" }] },\n  \"color-picker\": keyboard(\"test/web-additions.browser.test.tsx\"),\n  // SSR proves semantics but cannot catch the close-only row seen in BurnTok.\n  // Keep real geometry evidence attached without promoting catalog maturity.\n  toast: {\n    exportNames: [\"useToast\"],\n    proofs: [\n      { scenarios: [\"keyboard\"], file: stableCoreProofFile },\n      { scenarios: [\"dark\", \"long-copy\", \"large-text\", \"rtl\"], file: \"test/toast-layout.browser.test.tsx\" },\n    ],\n  },\n  select: keyboard(),\n  combobox: keyboard(),\n  dialog: keyboard(\"test/advanced.browser.test.tsx\"),\n  \"alert-dialog\": keyboardAndLongCopy(\"test/alert-dialog.keyboard.browser.test.tsx\"),\n  sheet: keyboardAndLongCopy(\"test/sheet-layout.browser.test.tsx\"),\n  tooltip: keyboard(\"test/tooltip.browser.test.tsx\"),\n  menu: keyboardAndLongCopy(\"test/menu.keyboard.browser.test.tsx\"),\n};\n\nconst exportEntries: Readonly<Record<string, readonly `./${string}`[] | undefined>> = publicExportEntries;\n\n/**\n * One claim per active Web row of the catalog. The subpath is the symbol's canonical granular entry, the export\n * names are the row's own symbol plus the companions published on that entry, and the scenarios are the row's\n * required Web evidence minus recorded gaps. Keyboard is never implied: it comes only from a dedicated proof.\n */\nfunction derivedClaim(entry: ComponentCatalogEntry): ReactRendererEvidenceComponent {\n  const componentId = componentIdOf(entry);\n  const extras = claimExtras[componentId] ?? {};\n  const symbols = entry.name === \"DesignSystemProvider\" ? [\"HjmProvider\"] : [entry.name, ...(entry.companions ?? [])];\n  // A row whose own name is not a symbol (Chart) claims through its first published companion.\n  const subpath = symbols.map((symbol) => exportEntries[symbol]?.[0]).find((entry) => entry !== undefined);\n  if (!subpath) throw new Error(`${entry.name} has no granular @hjmds/react export to claim evidence on`);\n  const exportNames = [\n    ...symbols.filter((symbol) => exportEntries[symbol]?.includes(subpath)),\n    ...(extras.exportNames ?? []),\n  ];\n  const required = getRequiredShowcaseEvidence(entry).find((evidence) => evidence.surface === \"web\")?.scenarios ?? [];\n  const gaps = webScenarioGaps[componentId] ?? [];\n  const extraProofs = extras.proofs ?? [];\n  const proven = new Set(extraProofs.flatMap((proof) => proof.scenarios));\n  const matrix = required.filter((scenario): scenario is ReactRendererEvidenceScenario =>\n    scenario !== \"default\" && scenario !== \"keyboard\" && scenario !== \"native-actions\" && scenario !== \"contract\"\n    && !gaps.includes(scenario as ReactRendererEvidenceScenario) && !proven.has(scenario as ReactRendererEvidenceScenario));\n  const proofs = [\n    { scenarios: [\"default\" as const], file: defaultProofFile, caseId: componentId },\n    ...(matrix.length === 0 ? [] : [{ scenarios: matrix, file: matrixProofFile, caseId: componentId }]),\n    ...extraProofs.map((proof) => ({ ...proof, caseId: componentId })),\n  ];\n  return {\n    componentId,\n    exportNames,\n    subpath,\n    scenarios: proofs.flatMap((proof) => proof.scenarios),\n    proofs,\n  };\n}\n\nconst activeWebEntries: readonly ComponentCatalogEntry[] = componentCatalog.filter((entry) => {\n  const status = getComponentSurfaceStatus(entry, \"web\");\n  return status === \"stable\" || status === \"beta\";\n});\n\n/**\n * First-party Web renderer claims. Scenario axes remain fail-closed: the\n * default scenario is an SSR render, the environment and accessibility\n * scenarios are computed-style assertions in scenario-matrix.browser.\n * Keyboard and cross-platform parity remain fail-closed until dedicated\n * interaction or paired-renderer proofs are mapped one-to-one.\n */\nexport const reactRendererEvidence = {\n  schemaVersion: reactRendererEvidenceSchemaVersion,\n  packageName: \"@hjmds/react\",\n  packageVersion: \"1.31.0\",\n  surface: \"web\",\n  components: activeWebEntries.map(derivedClaim),\n} as const satisfies ReactRendererEvidenceManifest;\n"]}
+{"version":3,"file":"evidence.js","sourceRoot":"","sources":["../src/evidence.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ShowcaseScenarioId } from \"@hjmds/design-contracts/showcase\";\nimport { getRequiredShowcaseEvidence } from \"@hjmds/design-contracts/showcase\";\nimport { componentCatalog, componentIdOf, getComponentSurfaceStatus, type ComponentCatalogEntry } from \"@hjmds/design-contracts/catalog\";\nimport { publicExportEntries } from \"./public-exports.generated.js\";\n\nexport const reactRendererEvidenceSchemaVersion = 2 as const;\n\nexport type ReactRendererEvidenceScenario = Exclude<ShowcaseScenarioId, \"contract\" | \"native-actions\">;\n\nexport type ReactRendererEvidenceComponent = Readonly<{\n  /** Canonical component id from the design-contracts catalog. */\n  componentId: string;\n  /** Public symbols that implement this contract on the declared subpath. */\n  exportNames: readonly string[];\n  /** Granular @hjmds/react export used by consumers. */\n  subpath: `./${string}`;\n  /** Scenarios supported by automated first-party renderer evidence. */\n  scenarios: readonly ReactRendererEvidenceScenario[];\n  /** Repository-local executable proof for every claimed scenario. */\n  proofs: readonly Readonly<{\n    scenarios: readonly ReactRendererEvidenceScenario[];\n    file: `test/${string}.test.tsx`;\n    caseId: string;\n  }>[];\n}>;\n\nexport type ReactRendererEvidenceManifest = Readonly<{\n  schemaVersion: typeof reactRendererEvidenceSchemaVersion;\n  packageName: \"@hjmds/react\";\n  packageVersion: string;\n  surface: \"web\";\n  components: readonly ReactRendererEvidenceComponent[];\n}>;\n\nconst defaultProofFile = \"test/default-render.ssr.test.tsx\" as const;\nconst matrixProofFile = \"test/scenario-matrix.browser.test.tsx\" as const;\nconst stableCoreProofFile = \"test/stable-core.browser.test.tsx\" as const;\n\ntype ProofFile = `test/${string}.test.tsx`;\n\n/**\n * Scenarios a component does not pass yet. Each entry is promotion debt that\n * the generated evidence projection reports; remove it when the component is\n * fixed and the matrix case passes. Stable surfaces cannot carry a gap\n * (scripts/check-workspace-sync.mjs).\n */\nconst webScenarioGaps: Readonly<Record<string, readonly ReactRendererEvidenceScenario[]>> = {};\n\n/**\n * Proofs that live outside the shared default/matrix files: keyboard behavior in a dedicated browser test,\n * long copy proven inside a portal by the component's own test, or a whole matrix run in a component file.\n * Everything else about a claim derives from the catalog row (2026-10-18 registration input).\n */\ntype ClaimExtras = Readonly<{\n  /** Extra proofs; their scenarios are removed from the shared matrix proof. */\n  proofs?: readonly Readonly<{ scenarios: readonly ReactRendererEvidenceScenario[]; file: ProofFile }>[];\n  /** Hooks or helpers published beside the component symbols on the same subpath. */\n  exportNames?: readonly string[];\n}>;\n\nconst keyboard = (file: ProofFile = stableCoreProofFile): ClaimExtras => ({ proofs: [{ scenarios: [\"keyboard\"], file }] });\nconst keyboardAndLongCopy = (file: ProofFile): ClaimExtras => ({ proofs: [{ scenarios: [\"keyboard\", \"long-copy\"], file }] });\n\nconst claimExtras: Readonly<Record<string, ClaimExtras>> = {\n  \"design-system-provider\": { exportNames: [\"useHjmTheme\"] },\n  layout: keyboard(),\n  link: keyboard(),\n  field: keyboard(),\n  \"search-field\": keyboard(),\n  \"password-field\": keyboard(),\n  \"otp-field\": keyboard(),\n  \"number-field\": keyboard(),\n  slider: keyboard(),\n  form: keyboard(\"test/form.keyboard.browser.test.tsx\"),\n  \"date-picker\": keyboard(),\n  calendar: keyboard(\"test/calendar.browser.test.tsx\"),\n  \"file-picker\": keyboard(\"test/file-picker.keyboard.browser.test.tsx\"),\n  checkbox: keyboard(),\n  \"checkbox-group\": keyboard(),\n  \"radio-group\": keyboard(),\n  switch: keyboard(),\n  \"segmented-control\": keyboard(),\n  chip: keyboard(),\n  tabs: keyboard(\"test/tabs.keyboard.browser.test.tsx\"),\n  breadcrumb: keyboard(\"test/page-navigation.browser.test.tsx\"),\n  pagination: keyboard(\"test/pagination.keyboard.browser.test.tsx\"),\n  popover: keyboardAndLongCopy(\"test/popover.browser.test.tsx\"),\n  \"side-panel\": keyboardAndLongCopy(\"test/side-panel.browser.test.tsx\"),\n  splitter: keyboard(\"test/splitter.browser.test.tsx\"),\n  tour: keyboardAndLongCopy(\"test/tour.browser.test.tsx\"),\n  tree: keyboard(\"test/tree.browser.test.tsx\"),\n  \"transfer-list\": keyboard(\"test/transfer-list.browser.test.tsx\"),\n  mentions: keyboard(\"test/mentions.browser.test.tsx\"),\n  \"command-palette\": keyboardAndLongCopy(\"test/command-palette.browser.test.tsx\"),\n  agreement: keyboard(\"test/agreement.keyboard.browser.test.tsx\"),\n  \"toggle-group\": keyboard(),\n  \"tags-input\": keyboard(),\n  \"skip-nav\": keyboardAndLongCopy(\"test/skip-nav.browser.test.tsx\"),\n  sidebar: keyboard(\"test/sidebar.browser.test.tsx\"),\n  \"date-range-picker\": keyboard(\"test/date-range.keyboard.browser.test.tsx\"),\n  \"auth-provider-button\": keyboard(),\n  \"data-table\": keyboard(\"test/data-table.keyboard.browser.test.tsx\"),\n  collapsible: keyboard(\"test/collapsible.keyboard.browser.test.tsx\"),\n  \"context-menu\": keyboardAndLongCopy(\"test/context-menu.interactions.browser.test.tsx\"),\n  menubar: keyboard(\"test/menubar.keyboard.browser.test.tsx\"),\n  anchor: keyboard(\"test/anchor.browser.test.tsx\"),\n  \"bottom-navigation\": keyboard(\"test/bottom-navigation.keyboard.browser.test.tsx\"),\n  \"load-more\": keyboard(\"test/load-more.interactions.browser.test.tsx\"),\n  carousel: keyboard(\"test/carousel.browser.test.tsx\"),\n  \"floating-action-button\": keyboard(),\n  accordion: keyboard(\"test/accordion.keyboard.browser.test.tsx\"),\n  \"upload-item\": keyboard(\"test/upload-item.browser.test.tsx\"),\n  // ThinkingOrb runs its whole environment matrix in its own file (canvas timing), not in scenario-matrix.\n  \"thinking-orb\": { proofs: [{ scenarios: [\"dark\", \"large-text\", \"rtl\", \"reduced-motion\", \"accessibility\"], file: \"test/thinking-orb.browser.test.tsx\" }] },\n  \"color-picker\": keyboard(\"test/web-additions.browser.test.tsx\"),\n  // SSR proves semantics but cannot catch the close-only row seen in BurnTok.\n  // Keep real geometry evidence attached without promoting catalog maturity.\n  toast: {\n    exportNames: [\"useToast\"],\n    proofs: [\n      { scenarios: [\"keyboard\"], file: stableCoreProofFile },\n      { scenarios: [\"dark\", \"long-copy\", \"large-text\", \"rtl\"], file: \"test/toast-layout.browser.test.tsx\" },\n    ],\n  },\n  select: keyboard(),\n  combobox: keyboard(),\n  dialog: keyboard(\"test/advanced.browser.test.tsx\"),\n  \"alert-dialog\": keyboardAndLongCopy(\"test/alert-dialog.keyboard.browser.test.tsx\"),\n  sheet: keyboardAndLongCopy(\"test/sheet-layout.browser.test.tsx\"),\n  tooltip: keyboard(\"test/tooltip.browser.test.tsx\"),\n  menu: keyboardAndLongCopy(\"test/menu.keyboard.browser.test.tsx\"),\n};\n\nconst exportEntries: Readonly<Record<string, readonly `./${string}`[] | undefined>> = publicExportEntries;\n\n/**\n * One claim per active Web row of the catalog. The subpath is the symbol's canonical granular entry, the export\n * names are the row's own symbol plus the companions published on that entry, and the scenarios are the row's\n * required Web evidence minus recorded gaps. Keyboard is never implied: it comes only from a dedicated proof.\n */\nfunction derivedClaim(entry: ComponentCatalogEntry): ReactRendererEvidenceComponent {\n  const componentId = componentIdOf(entry);\n  const extras = claimExtras[componentId] ?? {};\n  const symbols = entry.name === \"DesignSystemProvider\" ? [\"HjmProvider\"] : [entry.name, ...(entry.companions ?? [])];\n  // A row whose own name is not a symbol (Chart) claims through its first published companion.\n  const subpath = symbols.map((symbol) => exportEntries[symbol]?.[0]).find((entry) => entry !== undefined);\n  if (!subpath) throw new Error(`${entry.name} has no granular @hjmds/react export to claim evidence on`);\n  const exportNames = [\n    ...symbols.filter((symbol) => exportEntries[symbol]?.includes(subpath)),\n    ...(extras.exportNames ?? []),\n  ];\n  const required = getRequiredShowcaseEvidence(entry).find((evidence) => evidence.surface === \"web\")?.scenarios ?? [];\n  const gaps = webScenarioGaps[componentId] ?? [];\n  const extraProofs = extras.proofs ?? [];\n  const proven = new Set(extraProofs.flatMap((proof) => proof.scenarios));\n  const matrix = required.filter((scenario): scenario is ReactRendererEvidenceScenario =>\n    scenario !== \"default\" && scenario !== \"keyboard\" && scenario !== \"native-actions\" && scenario !== \"contract\"\n    && !gaps.includes(scenario as ReactRendererEvidenceScenario) && !proven.has(scenario as ReactRendererEvidenceScenario));\n  const proofs = [\n    { scenarios: [\"default\" as const], file: defaultProofFile, caseId: componentId },\n    ...(matrix.length === 0 ? [] : [{ scenarios: matrix, file: matrixProofFile, caseId: componentId }]),\n    ...extraProofs.map((proof) => ({ ...proof, caseId: componentId })),\n  ];\n  return {\n    componentId,\n    exportNames,\n    subpath,\n    scenarios: proofs.flatMap((proof) => proof.scenarios),\n    proofs,\n  };\n}\n\nconst activeWebEntries: readonly ComponentCatalogEntry[] = componentCatalog.filter((entry) => {\n  const status = getComponentSurfaceStatus(entry, \"web\");\n  return status === \"stable\" || status === \"beta\";\n});\n\n/**\n * First-party Web renderer claims. Scenario axes remain fail-closed: the\n * default scenario is an SSR render, the environment and accessibility\n * scenarios are computed-style assertions in scenario-matrix.browser.\n * Keyboard and cross-platform parity remain fail-closed until dedicated\n * interaction or paired-renderer proofs are mapped one-to-one.\n */\nexport const reactRendererEvidence = {\n  schemaVersion: reactRendererEvidenceSchemaVersion,\n  packageName: \"@hjmds/react\",\n  packageVersion: \"1.32.1\",\n  surface: \"web\",\n  components: activeWebEntries.map(derivedClaim),\n} as const satisfies ReactRendererEvidenceManifest;\n"]}

package/dist/image-choice.d.ts

@@ -1,8 +1,14 @@
-import type { ReactNode } from "react";
-import { type ImageChoiceItemDescriptor } from "@hjmds/design-contracts/components/image-choice";
+import { type ReactNode } from "react";
+import { type ImageChoiceItemDescriptor, type ImageChoiceItemLabelLines } from "@hjmds/design-contracts/components/image-choice";
 export type ImageChoiceItem = ImageChoiceItemDescriptor & Readonly<{
     image: ReactNode;
 }>;
+export type ImageChoiceVirtualization = Readonly<{
+    /** Height of the scrolling viewport in px. The group scrolls itself, so do not also put it in a scrolling parent. */
+    height: number;
+    /** Rows kept mounted above and below the visible window. */
+    overscan?: number;
+}>;
 type Base = Readonly<{
     /** Localized group name read before the choices. */
     label: string;
@@ -13,9 +19,16 @@ type Base = Readonly<{
      * The tile keeps the same accessible name, so turning this on does not change what assistive tech reads.
      */
     showItemLabels?: boolean;
+    /** Lines the visible item label wraps to before the ellipsis (default 1). Every tile reserves the same height. */
+    itemLabelLines?: ImageChoiceItemLabelLines;
     items: readonly ImageChoiceItem[];
     disabled?: boolean;
     className?: string;
+    /**
+     * Long lists (hundreds of people): only the rows near the viewport are mounted. Tiles keep their size; the column
+     * count follows the measured width.
+     */
+    virtualized?: ImageChoiceVirtualization;
 }>;
 export type ImageChoiceGroupProps = Base & (Readonly<{
     selectionMode: "single";

package/dist/image-choice.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image-choice.d.ts","sourceRoot":"","sources":["../src/image-choice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAyE,KAAK,yBAAyB,EAAE,MAAM,iDAAiD,CAAC;AAExK,MAAM,MAAM,eAAe,GAAG,yBAAyB,GAAG,QAAQ,CAAC;IAAE,KAAK,EAAE,SAAS,CAAA;CAAE,CAAC,CAAC;AACzF,KAAK,IAAI,GAAG,QAAQ,CAAC;IACnB,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,EAAE,SAAS,eAAe,EAAE,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AACH,MAAM,MAAM,qBAAqB,GAAG,IAAI,GAAG,CACvC,QAAQ,CAAC;IAAE,aAAa,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC,GAC/F,QAAQ,CAAC;IAAE,aAAa,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IAAC,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;CAAE,CAAC,CAC1G,CAAC;AAEF;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,+BA4B5D"}
+{"version":3,"file":"image-choice.d.ts","sourceRoot":"","sources":["../src/image-choice.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2E,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhH,OAAO,EAEwD,KAAK,yBAAyB,EAAE,KAAK,yBAAyB,EAC5H,MAAM,iDAAiD,CAAC;AAGzD,MAAM,MAAM,eAAe,GAAG,yBAAyB,GAAG,QAAQ,CAAC;IAAE,KAAK,EAAE,SAAS,CAAA;CAAE,CAAC,CAAC;AACzF,MAAM,MAAM,yBAAyB,GAAG,QAAQ,CAAC;IAC/C,qHAAqH;IACrH,MAAM,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AACH,KAAK,IAAI,GAAG,QAAQ,CAAC;IACnB,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kHAAkH;IAClH,cAAc,CAAC,EAAE,yBAAyB,CAAC;IAC3C,KAAK,EAAE,SAAS,eAAe,EAAE,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,yBAAyB,CAAC;CACzC,CAAC,CAAC;AACH,MAAM,MAAM,qBAAqB,GAAG,IAAI,GAAG,CACvC,QAAQ,CAAC;IAAE,aAAa,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC,GAC/F,QAAQ,CAAC;IAAE,aAAa,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IAAC,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;CAAE,CAAC,CAC1G,CAAC;AAEF;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,+BAyC5D"}

package/dist/image-choice.js

@@ -1,13 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { Text } from "./layout.js";
-import { imageChoiceRecipe, resolveImageChoiceToggle, validateImageChoiceItems } from "@hjmds/design-contracts/components/image-choice";
+import { useOptionalHjmTheme } from "./provider.js";
+import { typography } from "@hjmds/design-contracts/foundations";
+import { imageChoiceRecipe, resolveImageChoiceCaptionLines, resolveImageChoiceColumns, resolveImageChoiceTileHeight, resolveImageChoiceToggle, validateImageChoiceItemLabelLines, validateImageChoiceItems, } from "@hjmds/design-contracts/components/image-choice";
+import { resolveVirtualWindow, virtualListRecipe } from "@hjmds/design-contracts/components/virtual-list";
 /**
  * Picks avatars or photos by image (2026-10-16). Tiles are square, wrap to the available width, and show
  * a brand ring plus a check when chosen; assistive tech hears radios (single) or checkboxes (multiple).
  */
 export function ImageChoiceGroup(props) {
-    const { label, showLabel = false, showItemLabels = false, items, disabled = false, className } = props;
+    const { label, showLabel = false, showItemLabels = false, itemLabelLines = imageChoiceRecipe.itemLabelLines, items, disabled = false, className, virtualized } = props;
     validateImageChoiceItems(items);
+    validateImageChoiceItemLabelLines(itemLabelLines);
+    const theme = useOptionalHjmTheme();
+    const baseId = useId();
     const isSelected = (id) => props.selectionMode === "single" ? props.value === id : props.value.includes(id);
     const choose = (id) => {
         if (props.selectionMode === "single")
@@ -16,10 +23,55 @@ export function ImageChoiceGroup(props) {
             props.onValueChange(resolveImageChoiceToggle("multiple", props.value, id));
     };
     const role = props.selectionMode === "single" ? "radio" : "checkbox";
-    const style = { "--hjm-image-choice-size": `${imageChoiceRecipe.tileSize}px`, "--hjm-image-choice-gap": `${imageChoiceRecipe.gap}px`, "--hjm-image-choice-radius": `${imageChoiceRecipe.radius}px`, "--hjm-image-choice-ring": `${imageChoiceRecipe.ringWidth}px`, "--hjm-image-choice-offset": `${imageChoiceRecipe.ringOffset}px`, "--hjm-image-choice-check": `${imageChoiceRecipe.checkSize}px`, "--hjm-image-choice-item-label-gap": `${imageChoiceRecipe.itemLabelGap}px` };
-    return _jsxs("div", { className: ["hjm-image-choice", className].filter(Boolean).join(" "), style: style, children: [showLabel ? _jsx("span", { className: "hjm-image-choice__label", children: label }) : null, _jsx("div", { className: "hjm-image-choice__tiles", role: props.selectionMode === "single" ? "radiogroup" : "group", "aria-label": label, children: items.map(item => {
-                    const selected = isSelected(item.id);
-                    return _jsxs("button", { type: "button", role: role, "aria-checked": selected, "aria-label": item.label, className: "hjm-image-choice__tile", "data-selected": selected || undefined, disabled: disabled || item.disabled, onClick: () => choose(item.id), children: [_jsxs("span", { className: "hjm-image-choice__ring", children: [_jsx("span", { className: "hjm-image-choice__image", children: item.image }), selected ? _jsx("span", { className: "hjm-image-choice__check", "aria-hidden": "true", children: "\u2713" }) : null] }), showItemLabels ? _jsx(Text, { variant: imageChoiceRecipe.itemLabelVariant, className: "hjm-image-choice__item-label", "aria-hidden": "true", children: item.label }) : null] }, item.id);
-                }) })] });
+    const groupRole = props.selectionMode === "single" ? "radiogroup" : "group";
+    const captionLines = resolveImageChoiceCaptionLines({ showItemLabels, itemLabelLines, hasDescription: items.some(item => item.description !== undefined) });
+    const style = { "--hjm-image-choice-size": `${imageChoiceRecipe.tileSize}px`, "--hjm-image-choice-gap": `${imageChoiceRecipe.gap}px`, "--hjm-image-choice-radius": `${imageChoiceRecipe.radius}px`, "--hjm-image-choice-ring": `${imageChoiceRecipe.ringWidth}px`, "--hjm-image-choice-offset": `${imageChoiceRecipe.ringOffset}px`, "--hjm-image-choice-check": `${imageChoiceRecipe.checkSize}px`, "--hjm-image-choice-item-label-gap": `${imageChoiceRecipe.itemLabelGap}px`, "--hjm-image-choice-caption-lines": captionLines, "--hjm-image-choice-viewport-inset": `${imageChoiceRecipe.virtualViewportInset}px` };
+    const renderTile = (item, index) => {
+        const selected = isSelected(item.id);
+        const descriptionId = item.description === undefined ? undefined : `${baseId}-description-${index}`;
+        return _jsxs("button", { type: "button", role: role, "aria-checked": selected, "aria-label": item.label, "aria-describedby": descriptionId, className: "hjm-image-choice__tile", "data-selected": selected || undefined, disabled: disabled || item.disabled, onClick: () => choose(item.id), children: [_jsxs("span", { className: "hjm-image-choice__ring", children: [_jsx("span", { className: "hjm-image-choice__image", children: item.image }), selected ? _jsx("span", { className: "hjm-image-choice__check", "aria-hidden": "true", children: "\u2713" }) : null] }), captionLines > 0 ? _jsxs("span", { className: "hjm-image-choice__caption", children: [showItemLabels ? _jsx(Text, { variant: imageChoiceRecipe.itemLabelVariant, className: "hjm-image-choice__item-label", "aria-hidden": "true", "data-lines": itemLabelLines === 1 ? undefined : itemLabelLines, children: item.label }) : null, item.description === undefined ? null : _jsx(Text, { id: descriptionId, variant: imageChoiceRecipe.itemDescriptionVariant, tone: imageChoiceRecipe.itemDescriptionTone, className: "hjm-image-choice__item-description", "aria-hidden": "true", children: item.description })] }) : null] }, item.id);
+    };
+    // First-paint estimate in px; the rendered row is measured afterwards because caption line height is rem-based.
+    const estimatedTileHeight = resolveImageChoiceTileHeight(captionLines, typography[imageChoiceRecipe.itemLabelVariant].lineHeight * (theme?.environment.textScale ?? 1));
+    return _jsxs("div", { className: ["hjm-image-choice", className].filter(Boolean).join(" "), style: style, children: [showLabel ? _jsx("span", { className: "hjm-image-choice__label", children: label }) : null, virtualized
+                ? _jsx(VirtualTileRows, { items: items, renderTile: renderTile, label: label, role: groupRole, height: virtualized.height, overscan: virtualized.overscan ?? virtualListRecipe.overscan, estimatedTileHeight: estimatedTileHeight })
+                : _jsx("div", { className: "hjm-image-choice__tiles", role: groupRole, "aria-label": label, children: items.map(renderTile) })] });
+}
+/**
+ * Windowed rows of tiles. It reuses the VirtualList window math (`resolveVirtualWindow`) but not the VirtualList
+ * component: that one names its rows as list items and moves focus row by row, which would replace the radio/checkbox
+ * group this control is. Tiles stay in the tab order; focusing one scrolls it into view and the window follows.
+ */
+function VirtualTileRows({ items, renderTile, label, role, height, overscan, estimatedTileHeight }) {
+    const host = useRef(null);
+    const [width, setWidth] = useState(0);
+    const [measuredTileHeight, setMeasuredTileHeight] = useState(0);
+    const [scrollTop, setScrollTop] = useState(0);
+    const [focusedRow, setFocusedRow] = useState(null);
+    useEffect(() => {
+        if (!host.current)
+            return;
+        // Measure the slot itself (content box: inside the inset and the scrollbar); sheets and sidebars change it.
+        const observer = new ResizeObserver(([entry]) => setWidth(entry?.contentRect.width ?? 0));
+        observer.observe(host.current);
+        return () => observer.disconnect();
+    }, []);
+    useLayoutEffect(() => {
+        // Every row is one tile high (the caption block is reserved), so any mounted row gives the real stride.
+        const rendered = host.current?.querySelector(".hjm-image-choice__row")?.offsetHeight ?? 0;
+        if (rendered > 0 && rendered !== measuredTileHeight)
+            setMeasuredTileHeight(rendered);
+    });
+    const columns = width > 0 ? resolveImageChoiceColumns(width) : 0;
+    const stride = (measuredTileHeight || estimatedTileHeight) + imageChoiceRecipe.gap;
+    const rowCount = columns ? Math.ceil(items.length / columns) : 0;
+    const range = resolveVirtualWindow(rowCount, stride, height, scrollTop, overscan);
+    // Keep the focused tile's row mounted when scrolling moves it out of the window, so focus is not dropped to body.
+    const rows = Array.from({ length: range.end - range.start }, (_, i) => range.start + i);
+    if (focusedRow !== null && focusedRow < rowCount && !rows.includes(focusedRow))
+        rows.push(focusedRow);
+    rows.sort((first, second) => first - second); // DOM order is the tab order
+    return _jsx("div", { ref: host, className: "hjm-image-choice__viewport", role: role, "aria-label": label, style: { height }, onScroll: event => setScrollTop(event.currentTarget.scrollTop), children: columns ? _jsx("div", { style: { position: "relative", height: Math.max(0, range.totalHeight - imageChoiceRecipe.gap) }, children: rows.map(row => _jsx("div", { className: "hjm-image-choice__row", style: { top: row * stride }, onFocusCapture: () => setFocusedRow(row), onBlurCapture: event => { if (!event.currentTarget.contains(event.relatedTarget))
+                    setFocusedRow(current => current === row ? null : current); }, children: items.slice(row * columns, row * columns + columns).map((item, offset) => renderTile(item, row * columns + offset)) }, row)) }) : null });
 }
 //# sourceMappingURL=image-choice.js.map

package/dist/image-choice.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-choice.js","sourceRoot":"","sources":["../src/image-choice.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { CSSProperties, ReactNode } from \"react\";\nimport { Text } from \"./layout.js\";\nimport { imageChoiceRecipe, resolveImageChoiceToggle, validateImageChoiceItems, type ImageChoiceItemDescriptor } from \"@hjmds/design-contracts/components/image-choice\";\n\nexport type ImageChoiceItem = ImageChoiceItemDescriptor & Readonly<{ image: ReactNode }>;\ntype Base = Readonly<{\n  /** Localized group name read before the choices. */\n  label: string;\n  /** Visible caption above the tiles; omit when the screen heading already names the choice. */\n  showLabel?: boolean;\n  /**\n   * Shows each item's `label` under its tile (one ellipsized line), e.g. a person's name in a recipient picker.\n   * The tile keeps the same accessible name, so turning this on does not change what assistive tech reads.\n   */\n  showItemLabels?: boolean;\n  items: readonly ImageChoiceItem[];\n  disabled?: boolean;\n  className?: string;\n}>;\nexport type ImageChoiceGroupProps = Base & (\n  | Readonly<{ selectionMode: \"single\"; value: string | null; onValueChange(value: string): void }>\n  | Readonly<{ selectionMode: \"multiple\"; value: readonly string[]; onValueChange(value: string[]): void }>\n);\n\n/**\n * Picks avatars or photos by image (2026-10-16). Tiles are square, wrap to the available width, and show\n * a brand ring plus a check when chosen; assistive tech hears radios (single) or checkboxes (multiple).\n */\nexport function ImageChoiceGroup(props: ImageChoiceGroupProps) {\n  const { label, showLabel = false, showItemLabels = false, items, disabled = false, className } = props;\n  validateImageChoiceItems(items);\n  const isSelected = (id: string) => props.selectionMode === \"single\" ? props.value === id : props.value.includes(id);\n  const choose = (id: string) => {\n    if (props.selectionMode === \"single\") props.onValueChange(resolveImageChoiceToggle(\"single\", props.value, id));\n    else props.onValueChange(resolveImageChoiceToggle(\"multiple\", props.value, id));\n  };\n  const role = props.selectionMode === \"single\" ? \"radio\" : \"checkbox\";\n  const style = { \"--hjm-image-choice-size\": `${imageChoiceRecipe.tileSize}px`, \"--hjm-image-choice-gap\": `${imageChoiceRecipe.gap}px`, \"--hjm-image-choice-radius\": `${imageChoiceRecipe.radius}px`, \"--hjm-image-choice-ring\": `${imageChoiceRecipe.ringWidth}px`, \"--hjm-image-choice-offset\": `${imageChoiceRecipe.ringOffset}px`, \"--hjm-image-choice-check\": `${imageChoiceRecipe.checkSize}px`, \"--hjm-image-choice-item-label-gap\": `${imageChoiceRecipe.itemLabelGap}px` } as CSSProperties;\n  return <div className={[\"hjm-image-choice\", className].filter(Boolean).join(\" \")} style={style}>\n    {showLabel ? <span className=\"hjm-image-choice__label\">{label}</span> : null}\n    <div className=\"hjm-image-choice__tiles\" role={props.selectionMode === \"single\" ? \"radiogroup\" : \"group\"} aria-label={label}>\n      {items.map(item => {\n        const selected = isSelected(item.id);\n        return <button key={item.id} type=\"button\" role={role} aria-checked={selected} aria-label={item.label} className=\"hjm-image-choice__tile\" data-selected={selected || undefined}\n          disabled={disabled || item.disabled} onClick={() => choose(item.id)}>\n          {/* The ring lives on an inner frame so an item label can sit below it inside the same button (one tap target). */}\n          <span className=\"hjm-image-choice__ring\">\n            <span className=\"hjm-image-choice__image\">{item.image}</span>\n            {selected ? <span className=\"hjm-image-choice__check\" aria-hidden=\"true\">✓</span> : null}\n          </span>\n          {/* aria-label already names the tile; the visible copy must not be read twice. */}\n          {showItemLabels ? <Text variant={imageChoiceRecipe.itemLabelVariant} className=\"hjm-image-choice__item-label\" aria-hidden=\"true\">{item.label}</Text> : null}\n        </button>;\n      })}\n    </div>\n  </div>;\n}\n"]}
+{"version":3,"file":"image-choice.js","sourceRoot":"","sources":["../src/image-choice.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useId, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from \"react\";\nimport { Text } from \"./layout.js\";\nimport { useOptionalHjmTheme } from \"./provider.js\";\nimport { typography } from \"@hjmds/design-contracts/foundations\";\nimport {\n  imageChoiceRecipe, resolveImageChoiceCaptionLines, resolveImageChoiceColumns, resolveImageChoiceTileHeight, resolveImageChoiceToggle,\n  validateImageChoiceItemLabelLines, validateImageChoiceItems, type ImageChoiceItemDescriptor, type ImageChoiceItemLabelLines,\n} from \"@hjmds/design-contracts/components/image-choice\";\nimport { resolveVirtualWindow, virtualListRecipe } from \"@hjmds/design-contracts/components/virtual-list\";\n\nexport type ImageChoiceItem = ImageChoiceItemDescriptor & Readonly<{ image: ReactNode }>;\nexport type ImageChoiceVirtualization = Readonly<{\n  /** Height of the scrolling viewport in px. The group scrolls itself, so do not also put it in a scrolling parent. */\n  height: number;\n  /** Rows kept mounted above and below the visible window. */\n  overscan?: number;\n}>;\ntype Base = Readonly<{\n  /** Localized group name read before the choices. */\n  label: string;\n  /** Visible caption above the tiles; omit when the screen heading already names the choice. */\n  showLabel?: boolean;\n  /**\n   * Shows each item's `label` under its tile (one ellipsized line), e.g. a person's name in a recipient picker.\n   * The tile keeps the same accessible name, so turning this on does not change what assistive tech reads.\n   */\n  showItemLabels?: boolean;\n  /** Lines the visible item label wraps to before the ellipsis (default 1). Every tile reserves the same height. */\n  itemLabelLines?: ImageChoiceItemLabelLines;\n  items: readonly ImageChoiceItem[];\n  disabled?: boolean;\n  className?: string;\n  /**\n   * Long lists (hundreds of people): only the rows near the viewport are mounted. Tiles keep their size; the column\n   * count follows the measured width.\n   */\n  virtualized?: ImageChoiceVirtualization;\n}>;\nexport type ImageChoiceGroupProps = Base & (\n  | Readonly<{ selectionMode: \"single\"; value: string | null; onValueChange(value: string): void }>\n  | Readonly<{ selectionMode: \"multiple\"; value: readonly string[]; onValueChange(value: string[]): void }>\n);\n\n/**\n * Picks avatars or photos by image (2026-10-16). Tiles are square, wrap to the available width, and show\n * a brand ring plus a check when chosen; assistive tech hears radios (single) or checkboxes (multiple).\n */\nexport function ImageChoiceGroup(props: ImageChoiceGroupProps) {\n  const { label, showLabel = false, showItemLabels = false, itemLabelLines = imageChoiceRecipe.itemLabelLines, items, disabled = false, className, virtualized } = props;\n  validateImageChoiceItems(items);\n  validateImageChoiceItemLabelLines(itemLabelLines);\n  const theme = useOptionalHjmTheme();\n  const baseId = useId();\n  const isSelected = (id: string) => props.selectionMode === \"single\" ? props.value === id : props.value.includes(id);\n  const choose = (id: string) => {\n    if (props.selectionMode === \"single\") props.onValueChange(resolveImageChoiceToggle(\"single\", props.value, id));\n    else props.onValueChange(resolveImageChoiceToggle(\"multiple\", props.value, id));\n  };\n  const role = props.selectionMode === \"single\" ? \"radio\" : \"checkbox\";\n  const groupRole = props.selectionMode === \"single\" ? \"radiogroup\" : \"group\";\n  const captionLines = resolveImageChoiceCaptionLines({ showItemLabels, itemLabelLines, hasDescription: items.some(item => item.description !== undefined) });\n  const style = { \"--hjm-image-choice-size\": `${imageChoiceRecipe.tileSize}px`, \"--hjm-image-choice-gap\": `${imageChoiceRecipe.gap}px`, \"--hjm-image-choice-radius\": `${imageChoiceRecipe.radius}px`, \"--hjm-image-choice-ring\": `${imageChoiceRecipe.ringWidth}px`, \"--hjm-image-choice-offset\": `${imageChoiceRecipe.ringOffset}px`, \"--hjm-image-choice-check\": `${imageChoiceRecipe.checkSize}px`, \"--hjm-image-choice-item-label-gap\": `${imageChoiceRecipe.itemLabelGap}px`, \"--hjm-image-choice-caption-lines\": captionLines, \"--hjm-image-choice-viewport-inset\": `${imageChoiceRecipe.virtualViewportInset}px` } as CSSProperties;\n  const renderTile = (item: ImageChoiceItem, index: number) => {\n    const selected = isSelected(item.id);\n    const descriptionId = item.description === undefined ? undefined : `${baseId}-description-${index}`;\n    return <button key={item.id} type=\"button\" role={role} aria-checked={selected} aria-label={item.label} aria-describedby={descriptionId} className=\"hjm-image-choice__tile\" data-selected={selected || undefined}\n      disabled={disabled || item.disabled} onClick={() => choose(item.id)}>\n      {/* The ring lives on an inner frame so an item label can sit below it inside the same button (one tap target). */}\n      <span className=\"hjm-image-choice__ring\">\n        <span className=\"hjm-image-choice__image\">{item.image}</span>\n        {selected ? <span className=\"hjm-image-choice__check\" aria-hidden=\"true\">✓</span> : null}\n      </span>\n      {/* Every tile reserves the same caption block, so wrapped rows stay even and virtual rows share one height.\n          aria-label already names the tile; the description is read once through aria-describedby. */}\n      {captionLines > 0 ? <span className=\"hjm-image-choice__caption\">\n        {showItemLabels ? <Text variant={imageChoiceRecipe.itemLabelVariant} className=\"hjm-image-choice__item-label\" aria-hidden=\"true\" data-lines={itemLabelLines === 1 ? undefined : itemLabelLines}>{item.label}</Text> : null}\n        {item.description === undefined ? null : <Text id={descriptionId} variant={imageChoiceRecipe.itemDescriptionVariant} tone={imageChoiceRecipe.itemDescriptionTone} className=\"hjm-image-choice__item-description\" aria-hidden=\"true\">{item.description}</Text>}\n      </span> : null}\n    </button>;\n  };\n  // First-paint estimate in px; the rendered row is measured afterwards because caption line height is rem-based.\n  const estimatedTileHeight = resolveImageChoiceTileHeight(captionLines, typography[imageChoiceRecipe.itemLabelVariant].lineHeight * (theme?.environment.textScale ?? 1));\n  return <div className={[\"hjm-image-choice\", className].filter(Boolean).join(\" \")} style={style}>\n    {showLabel ? <span className=\"hjm-image-choice__label\">{label}</span> : null}\n    {virtualized\n      ? <VirtualTileRows items={items} renderTile={renderTile} label={label} role={groupRole} height={virtualized.height} overscan={virtualized.overscan ?? virtualListRecipe.overscan} estimatedTileHeight={estimatedTileHeight} />\n      : <div className=\"hjm-image-choice__tiles\" role={groupRole} aria-label={label}>{items.map(renderTile)}</div>}\n  </div>;\n}\n\n/**\n * Windowed rows of tiles. It reuses the VirtualList window math (`resolveVirtualWindow`) but not the VirtualList\n * component: that one names its rows as list items and moves focus row by row, which would replace the radio/checkbox\n * group this control is. Tiles stay in the tab order; focusing one scrolls it into view and the window follows.\n */\nfunction VirtualTileRows({ items, renderTile, label, role, height, overscan, estimatedTileHeight }: Readonly<{\n  items: readonly ImageChoiceItem[]; renderTile: (item: ImageChoiceItem, index: number) => ReactNode; label: string;\n  role: \"radiogroup\" | \"group\"; height: number; overscan: number; estimatedTileHeight: number;\n}>) {\n  const host = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(0);\n  const [measuredTileHeight, setMeasuredTileHeight] = useState(0);\n  const [scrollTop, setScrollTop] = useState(0);\n  const [focusedRow, setFocusedRow] = useState<number | null>(null);\n  useEffect(() => {\n    if (!host.current) return;\n    // Measure the slot itself (content box: inside the inset and the scrollbar); sheets and sidebars change it.\n    const observer = new ResizeObserver(([entry]) => setWidth(entry?.contentRect.width ?? 0));\n    observer.observe(host.current);\n    return () => observer.disconnect();\n  }, []);\n  useLayoutEffect(() => {\n    // Every row is one tile high (the caption block is reserved), so any mounted row gives the real stride.\n    const rendered = host.current?.querySelector<HTMLElement>(\".hjm-image-choice__row\")?.offsetHeight ?? 0;\n    if (rendered > 0 && rendered !== measuredTileHeight) setMeasuredTileHeight(rendered);\n  });\n  const columns = width > 0 ? resolveImageChoiceColumns(width) : 0;\n  const stride = (measuredTileHeight || estimatedTileHeight) + imageChoiceRecipe.gap;\n  const rowCount = columns ? Math.ceil(items.length / columns) : 0;\n  const range = resolveVirtualWindow(rowCount, stride, height, scrollTop, overscan);\n  // Keep the focused tile's row mounted when scrolling moves it out of the window, so focus is not dropped to body.\n  const rows = Array.from({ length: range.end - range.start }, (_, i) => range.start + i);\n  if (focusedRow !== null && focusedRow < rowCount && !rows.includes(focusedRow)) rows.push(focusedRow);\n  rows.sort((first, second) => first - second); // DOM order is the tab order\n  return <div ref={host} className=\"hjm-image-choice__viewport\" role={role} aria-label={label} style={{ height }}\n    onScroll={event => setScrollTop(event.currentTarget.scrollTop)}>\n    {columns ? <div style={{ position: \"relative\", height: Math.max(0, range.totalHeight - imageChoiceRecipe.gap) }}>\n      {rows.map(row => <div key={row} className=\"hjm-image-choice__row\" style={{ top: row * stride }}\n        onFocusCapture={() => setFocusedRow(row)} onBlurCapture={event => { if (!event.currentTarget.contains(event.relatedTarget)) setFocusedRow(current => current === row ? null : current); }}>\n        {items.slice(row * columns, row * columns + columns).map((item, offset) => renderTile(item, row * columns + offset))}\n      </div>)}\n    </div> : null}\n  </div>;\n}\n"]}