Product

The bar has a seat in the page, below the colour swatches and size chips. A tall drawn hero owns the first screen with no chrome over it; scroll and the bar rises with the content until it reaches the bottom edge, where it stays: it docks, takes on a surface, a hairline and a shadow, and extends through the home indicator. Scrolling back releases it into its seat. Picking a colourway slides a ring between swatches and repaints the hero, picking a size slides a filled chip, and the stepper counts the total up as a number rather than swapping it.

Notes

• DockingBarScroll measures its own bar: the seat always keeps the bar's height, so nothing jumps at the hand-off, and the footer is padded by that height so its last row clears the docked bar. dockGap is the extra distance above the bottom edge at which it docks; zero makes the hand-off seamless.
• The bar is the same view inline and docked, so a stepper's count and a button's press survive docking. An optional isDocked binding lets the page fade in a compact title once the hero is gone.
• VariantPicker slides its selection with matchedGeometryEffect rather than blinking between options: a ring travels between colour swatches, a filled chip travels between sizes. Sold-out options are struck through and cannot be chosen.
• The chips sit in a horizontal scroll, so accessibility text sizes keep every chip at full size and its 44pt target instead of squeezing a long row of sizes into the width.
• The product image is drawn in code with SPScenery, never photography: a flat field, an outline disc, a solid disc in the chosen colourway and two hard-edged planes, under the family's thin gilded rings.
• The stepper is one adjustable VoiceOver element ("Quantity, 2"), each step ticks, and the ends of its range disable their button instead of doing nothing.
• Reduce Motion replaces the docking spring and the selection spring with short ease-outs.
• ProductDetailExample at the end of ProductDetail.swift is the screen shown in the preview; copy it as a starting point.