diff --git a/src/uix/morfo/components/color-picker.ts b/src/uix/morfo/components/color-picker.ts
index ee4edc9d8..3c58b8978 100644
--- a/src/uix/morfo/components/color-picker.ts
+++ b/src/uix/morfo/components/color-picker.ts
@@ -7,6 +7,30 @@ export const colorPickerMorfo = {
 	scope: ['soma', 'sema'],
 	apg: 'https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/',
 	events: [
+		// Area drag — same shape as the slider's `handle-*` events so sema
+		// consumers can hook the family/verb uniformly (sounds, haptics,
+		// transient styling) regardless of which dragger emitted.
+		{
+			name: 'handle-pick',
+			semantic: {
+				family: 'handle',
+				verb: 'pick',
+				target: v.partRef('area'),
+				sequence: 'coincident'
+			}
+		},
+		{
+			name: 'handle-drag',
+			semantic: {
+				family: 'handle',
+				verb: 'drag',
+				target: v.partRef('area'),
+				sequence: 'coincident'
+			}
+		},
+		// Value commit — fires on pointer release (area thumb / channel
+		// slider / swatch click / eyedropper pick). `commit-set` is the
+		// canonical "save" signal.
 		{
 			name: 'commit-set',
 			semantic: {
diff --git a/src/uix/soma/components/color-picker/color-picker-provider.svelte.ts b/src/uix/soma/components/color-picker/color-picker-provider.svelte.ts
index 1164a96dc..9212e01c9 100644
--- a/src/uix/soma/components/color-picker/color-picker-provider.svelte.ts
+++ b/src/uix/soma/components/color-picker/color-picker-provider.svelte.ts
@@ -692,6 +692,8 @@ export class ColorPickerAreaProvider {
 		const withX = setColorChannel(this.provider.effectiveColor, this.xChannel, xValue);
 		const withBoth = setColorChannel(withX, this.yChannel, yValue);
 		this.provider.opts.value.current = withBoth;
+		// Sema: emit `handle-drag` so consumers can stream tactile feedback.
+		void this.provider.runtime.trigger('handle-drag');
 	}
 
 	readonly onpointerdown = (e: PointerEvent): void => {
@@ -699,6 +701,8 @@ export class ColorPickerAreaProvider {
 		const target = e.currentTarget as HTMLElement;
 		target.setPointerCapture(e.pointerId);
 		this.pointerId = e.pointerId;
+		// Sema: emit `handle-pick` at drag start (mirrors slider semantics).
+		void this.provider.runtime.trigger('handle-pick');
 		this.handlePointerMove(e.clientX, e.clientY, target.getBoundingClientRect());
 		e.preventDefault();
 	};
@@ -712,6 +716,8 @@ export class ColorPickerAreaProvider {
 	readonly onpointerup = (e: PointerEvent): void => {
 		if (this.pointerId !== e.pointerId) return;
 		this.pointerId = null;
+		// Sema: fire `commit-set` on release (canonical save signal).
+		void this.provider.runtime.trigger('commit-set');
 		this.provider.commitChange();
 	};
 
@@ -837,6 +843,11 @@ export class ColorPickerAreaThumbProvider {
 		if (nextX !== x) next = setColorChannel(next, this.area.xChannel, nextX);
 		if (nextY !== y) next = setColorChannel(next, this.area.yChannel, nextY);
 		this.provider.opts.value.current = next;
+
+		// Sema: each keypress is one drag-step + commit (slider parity).
+		void this.provider.runtime.trigger('handle-drag');
+		void this.provider.runtime.trigger('commit-set');
+		this.provider.commitChange();
 	};
 
 	readonly props = $derived.by(() => {
diff --git a/web/routes/uix/components/color-picker/+page.svelte b/web/routes/uix/components/color-picker/+page.svelte
index 0bf0270f7..fc06f332a 100644
--- a/web/routes/uix/components/color-picker/+page.svelte
+++ b/web/routes/uix/components/color-picker/+page.svelte
@@ -131,6 +131,7 @@
 		[
 			"<script lang='ts'>",
 			"  import * as ColorPicker from '$soma/components/color-picker';",
+			"  import * as PickerShell from '$soma/components/picker-shell';",
 			"  import { colorValueFromRgb, type ColorValue } from '$libs/color';",
 			'',
 			'  let value = $state<ColorValue | undefined>(colorValueFromRgb({ r: 30, g: 144, b: 255, a: 1 }));',
@@ -139,20 +140,39 @@
 			'</' + 'script>',
 			'',
 			'<ColorPicker.Provider bind:value bind:format bind:open',
+			mode !== 'inline' && `  mode="${mode}"`,
 			inline && '  inline',
 			closeOnSelect && '  closeOnSelect',
 			!enableAlpha && '  enableAlpha={false}',
 			'>',
-			'  <ColorPicker.Trigger><ColorPicker.ValueText /></ColorPicker.Trigger>',
+			'  <ColorPicker.Control>',
+			'    <ColorPicker.Trigger><ColorPicker.ValueText /></ColorPicker.Trigger>',
+			'  </ColorPicker.Control>',
 			'  <ColorPicker.Content>',
-			'    <ColorPicker.Area><ColorPicker.AreaBackground /><ColorPicker.AreaThumb /></ColorPicker.Area>',
+			'    <ColorPicker.Area>',
+			'      <ColorPicker.AreaBackground />',
+			'      <ColorPicker.AreaThumb />',
+			'    </ColorPicker.Area>',
 			'    <ColorPicker.ChannelSlider channel="hue">',
 			'      <ColorPicker.ChannelSliderTrack /><ColorPicker.ChannelSliderThumb />',
 			'    </ColorPicker.ChannelSlider>',
 			enableAlpha && '    <ColorPicker.ChannelSlider channel="alpha">',
 			enableAlpha && '      <ColorPicker.ChannelSliderTrack /><ColorPicker.ChannelSliderThumb />',
 			enableAlpha && '    </ColorPicker.ChannelSlider>',
-			'    <ColorPicker.SwatchGroup>{#each presets as c}<ColorPicker.SwatchTrigger color={c} />{/each}</ColorPicker.SwatchGroup>',
+			'    <ColorPicker.ValueSwatch />',
+			'    <ColorPicker.ChannelInput />',
+			'    <ColorPicker.EyeDropper />',
+			'    <ColorPicker.SwatchGroup>',
+			'      {#each presets as c}<ColorPicker.SwatchTrigger color={c}>',
+			'        <ColorPicker.Swatch color={c} />',
+			'        <ColorPicker.SwatchIndicator />',
+			'      </ColorPicker.SwatchTrigger>{/each}',
+			'    </ColorPicker.SwatchGroup>',
+			showFooter && (showClear || showCancel || showClose) && '    <PickerShell.Footer>',
+			showFooter && showClear && '      <PickerShell.Clear />',
+			showFooter && showCancel && '      <PickerShell.Cancel />',
+			showFooter && showClose && '      <PickerShell.Close />',
+			showFooter && (showClear || showCancel || showClose) && '    </PickerShell.Footer>',
 			'  </ColorPicker.Content>',
 			'</ColorPicker.Provider>'
 		]
@@ -175,18 +195,33 @@
 			size !== 'md' && `  size="${size}"`,
 			variant !== 'surface' && `  variant="${variant}"`,
 			color !== 'primary' && `  color="${color}"`,
+			mode !== 'inline' && `  mode="${mode}"`,
 			inline && '  inline',
 			closeOnSelect && '  closeOnSelect',
 			!enableAlpha && '  enableAlpha={false}',
 			'>',
-			'  <ColorPicker.Trigger><ColorPicker.ValueText /></ColorPicker.Trigger>',
+			'  <ColorPicker.Label>Brand color</ColorPicker.Label>',
+			'  <ColorPicker.Control>',
+			'    <ColorPicker.Trigger><ColorPicker.ValueText /></ColorPicker.Trigger>',
+			'    <ColorPicker.HiddenInput />',
+			'  </ColorPicker.Control>',
 			'  <ColorPicker.Portal>',
 			'    <ColorPicker.Content>',
 			'      <ColorPicker.Area />',
 			'      <ColorPicker.ChannelSlider channel="hue" />',
 			enableAlpha && '      <ColorPicker.ChannelSlider channel="alpha" />',
-			'      <ColorPicker.SwatchGroup>{#each presets as c}<ColorPicker.SwatchTrigger color={c} />{/each}</ColorPicker.SwatchGroup>',
+			'      <!-- compact value row: swatch + channel input + eyedropper -->',
+			'      <ColorPicker.ValueSwatch />',
+			'      <ColorPicker.ChannelInput />',
 			'      <ColorPicker.EyeDropper />',
+			'      <ColorPicker.SwatchGroup>',
+			'        {#each presets as c}<ColorPicker.SwatchTrigger color={c} />{/each}',
+			'      </ColorPicker.SwatchGroup>',
+			showFooter && (showClear || showCancel || showClose) && '      <ColorPicker.Footer>',
+			showFooter && showClear && '        <ColorPicker.Clear />',
+			showFooter && showCancel && '        <ColorPicker.Cancel />',
+			showFooter && showClose && '        <ColorPicker.Close />',
+			showFooter && (showClear || showCancel || showClose) && '      </ColorPicker.Footer>',
 			'    </ColorPicker.Content>',
 			'  </ColorPicker.Portal>',
 			'</ColorPicker>'