Picker

listens-picker@listenssoft/speechui-angular

A color picker whose grid opens on command and answers to color names: “color dark red”.

Speaking the command opens the swatch grid (once per listening session); whatever follows is matched against color names, most specific first — “dark red” wins over “red”. The palette is shared across all kits: light, base, and dark variants of nine hues, plus black and white — 29 names in all.

Basic picker

Loading the Angular kit…

Hold anywhere and say:“color”“color dark red”“color light blue”

Props

listeningContent
default command

Angular

Updates as you tick props

import { Component } from "@angular/core";import { ListensPickerComponent } from "@listenssoft/speechui-angular";
@Component({  selector: "demo-picker",  imports: [ListensPickerComponent],  template: `    <listens-picker label="Accent color" command="color" [(value)]="color" />  `,})export class DemoPicker {  color = "blue";}

What you can say

Say	Effect
“color”	Opens the swatch grid (once per listening session).
“color dark red”	Opens if needed and selects dark red — most-specific name first, so “dark red” never lands on “red”.
“color … pink”	The name may arrive later in the same phrase; the first matching color wins.
“purple (no command configured)”	With no command set, any color name spoken selects directly.

The spoken names are: light/dark/plain red, orange, yellow, green, blue, purple, pink, brown, grey — plus black and white.

API reference

Angular inputs & outputs for @listenssoft/speechui-angular.

Inputs

Input	Type	Default	Description
`listeningContent`	`string`	`command`	Label text while the mic is open.

Extra inputs

Input	Type	Default	Description
`value`	`string`	`""`	Two-way bindable selected color name — [(value)].
`label`	`string`	`""`	Label above the picker; the command fallback.
`command`	`string`	`label`	The spoken command.

Outputs

Output	Type	Default	Description
`valueChange`	`string`	—	The [(value)] channel (the color name).
`change`	`ListensColorOption`	—	Emits { name, hex } whenever a color is chosen — click or speech.
`matched`	`ListensColorOption`	—	Emits when speech selects a color.

Styling hooks

CSS hooks

Hook	Type	Default	Description
`.listens-picker (root)`	`class`	—	Same part classes as React (-preview, -swatch, -grid, -option…).
`data-open / data-listening`	`attribute`	—	State attributes on the root.

Behavior notes

All frameworks: Closing and reopening by voice within one hold is deliberate: the grid opens once per listening session, so interim re-deliveries don't flap it.