422f83331f
- Add accessible OkHCL channel sliders and use Reka ColorSlider for standard color channels - Split fill state and binding-aware swatches from application popover composition - Add keyboard-operable gradient stops, shared demos, generated docs, and focused coverage
1.6 KiB
1.6 KiB
| title | description |
|---|---|
| ChannelSlider | Accessible scalar channel slider for OkHCL controls. |
ChannelSlider
ChannelSlider provides the same Root/Track/Thumb composition and keyboard behavior as Reka's
Slider while accepting an arbitrary scalar channel. OpenPencil uses it only for OkHCL channels;
standard RGB, HSL, and HSB controls should use Reka ColorSlider directly.
Anatomy
ChannelSliderRoot— controlled value, range, step, orientation, and accessible channel labelChannelSliderTrack— polymorphic track elementChannelSliderThumb— slider thumb with range ARIA and formatted value text
Arrow keys step the value. Page Up and Page Down use larger steps, while Home and End move to the range boundaries. The primitive is temporary until Reka issue #2798 provides first-class OkHCL support.
<script setup lang="ts">
import { ref } from 'vue'
import {
ChannelSliderRoot,
ChannelSliderThumb,
ChannelSliderTrack
} from '@open-pencil/vue'
const chroma = ref(0.16)
</script>
<template>
<ChannelSliderRoot v-model="chroma" label="Chroma" :min="0" :max="0.4" :step="0.001">
<ChannelSliderTrack />
<ChannelSliderThumb />
</ChannelSliderRoot>
</template>