General

Zoom Level (Stepper)

Stepper control for image zoom level on desktop, typically inside `Lightbox`.

Overview

ZoomLevelStepper is the stepper control for fine-grained image zoom on desktop, used inside Lightbox for click-by-click zoom adjustment.

Click-by-click zoom on desktop helps shoppers inspect detail (weave, stitching, finish) the way they would in store, lifting buying confidence.
Discrete steps make it predictable how far the next click will zoom, which avoids the overshoot frustration of free-form zoom controls.
Shares the lightbox shell with the mobile segmented variant, so the experience stays cohesive when shoppers move between devices.

ZoomLevelStepper Default

<ZoomLevelStepper
    v-model:current-zoom-level="zoomLevel"
    variant="white"
    :min-level="1"
    :max-level="4"
  />

Two variants ('white', 'black') match light and dark lightbox chrome with token-driven active states
`minLevel` and `maxLevel` props bound the stepper range, so callers control zoom resolution per image
Plus and minus buttons rendered as 'subtle' variant icon buttons, keeping the control unobtrusive over the image
Discrete step increments avoid the overshoot frustration of free-form zoom on trackpad and mouse
Shares the lightbox shell with the mobile segmented variant, so desktop and phone shoppers see a cohesive experience

Event	Type
`update:currentZoomLevel`	`(event: "update:currentZoomLevel", value: number): void`

Zoom Level (Segmented)

Segmented control for image zoom level on mobile, typically inside `Lightbox`.

Icon List

A icon list component