GradientEditorStop

GradientEditorStop renders a polymorphic gradient stop with documented selection and dragging state. Interactive stops use the slider role and expose their percentage position through ARIA.

Use interactive stops on the gradient bar. Arrow keys nudge by positionStep; holding Shift uses a 10× step. Home and End move to either boundary, while Delete and Backspace emit remove when the stop is removable. Handled keys stop propagation so editor-level deletion and movement shortcuts do not run. Native Tab order cycles between stops.

Set interactive="false" when reusing the primitive around a composite stop row. The row still exposes slot actions and data-selected/data-dragging, but does not enter the slider tab order.

vue

<script setup lang="ts">
import type { GradientStop } from '@open-pencil/scene-graph'
import { GradientEditorStop
 } from '@open-pencil/vue'

const stop
: GradientStop = {
  color
: { r
: 0.4, g
: 0.2, b
: 0.9, a
: 1 },
  position
: 0.5
}
</script>

<template>
  <GradientEditorStop

    :stop
="stop
"
    :index
="0"
    active

    label
="Middle gradient stop"
    @update-position
="(_index
, position
) => console
.log
(position
)"
  />
</template>

Generated API reference