From 37de27fcf263f59b85e97c245d39bf329843d970 Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Fri, 15 May 2026 04:08:25 +0200
Subject: [PATCH] Declare interactive data attrs in morfos

---
 src/uix/morfo/components/combobox.ts          |  2 ++
 src/uix/morfo/components/context-menu.ts      |  8 ++++++-
 src/uix/morfo/components/drag-drop.ts         |  3 +++
 src/uix/morfo/components/drawer.ts            |  9 +++++++-
 src/uix/morfo/components/dropdown-menu.ts     |  8 ++++++-
 src/uix/morfo/components/file-upload.ts       |  5 ++++-
 src/uix/morfo/components/grid-list.ts         |  1 +
 src/uix/morfo/components/listbox.ts           |  1 +
 src/uix/morfo/components/select.ts            |  2 ++
 src/uix/morfo/components/tag-group.ts         |  2 ++
 src/uix/morfo/components/time-picker.ts       | 21 +++++++++++++++++++
 src/uix/morfo/components/tree-grid.ts         |  2 ++
 .../drawer/drawer-provider.svelte.ts          |  4 ++--
 .../time-picker-day-period-toggle.svelte      |  9 ++++----
 14 files changed, 67 insertions(+), 10 deletions(-)

diff --git a/src/uix/morfo/components/combobox.ts b/src/uix/morfo/components/combobox.ts
index 5fef9b9af..598f122df 100644
--- a/src/uix/morfo/components/combobox.ts
+++ b/src/uix/morfo/components/combobox.ts
@@ -134,6 +134,8 @@ export const comboboxMorfo = {
 			data: [
 				{ attr: 'data-state', values: ['checked', 'unchecked'] },
 				{ attr: 'data-value' },
+				{ attr: 'data-label', severity: 'optional' },
+				{ attr: 'data-highlighted', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' }
 			],
 			aria: [
diff --git a/src/uix/morfo/components/context-menu.ts b/src/uix/morfo/components/context-menu.ts
index 951290815..ff95aa92f 100644
--- a/src/uix/morfo/components/context-menu.ts
+++ b/src/uix/morfo/components/context-menu.ts
@@ -82,7 +82,10 @@ export const contextMenuMorfo = {
 			defaultElement: 'div',
 			role: 'menuitem',
 			optional: false,
-			data: [{ attr: 'data-disabled', severity: 'optional' }],
+			data: [
+				{ attr: 'data-text-value', severity: 'optional' },
+				{ attr: 'data-disabled', severity: 'optional' }
+			],
 			aria: [
 				{
 					attr: 'aria-disabled',
@@ -103,6 +106,7 @@ export const contextMenuMorfo = {
 			states: ['checked', 'unchecked'],
 			data: [
 				{ attr: 'data-state', values: ['checked', 'unchecked'] },
+				{ attr: 'data-text-value', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' }
 			],
 			aria: [
@@ -137,6 +141,7 @@ export const contextMenuMorfo = {
 			states: ['checked', 'unchecked'],
 			data: [
 				{ attr: 'data-state', values: ['checked', 'unchecked'] },
+				{ attr: 'data-text-value', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' }
 			],
 			aria: [
@@ -169,6 +174,7 @@ export const contextMenuMorfo = {
 			states: ['open', 'closed'],
 			data: [
 				{ attr: 'data-state', values: ['open', 'closed'] },
+				{ attr: 'data-text-value', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' }
 			],
 			aria: [
diff --git a/src/uix/morfo/components/drag-drop.ts b/src/uix/morfo/components/drag-drop.ts
index eef33c249..8575e4e4e 100644
--- a/src/uix/morfo/components/drag-drop.ts
+++ b/src/uix/morfo/components/drag-drop.ts
@@ -25,6 +25,8 @@ export const dragDropMorfo = {
 			optional: false,
 			data: [
 				{ attr: 'data-value' },
+				{ attr: 'data-text-value', severity: 'optional' },
+				{ attr: 'data-drag-handle', severity: 'optional' },
 				{ attr: 'data-dragging', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' }
 			],
@@ -68,6 +70,7 @@ export const dragDropMorfo = {
 			data: [
 				{ attr: 'data-dragover', severity: 'optional' },
 				{ attr: 'data-accepting', severity: 'optional' },
+				{ attr: 'data-text-value', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' }
 			],
 			aria: [
diff --git a/src/uix/morfo/components/drawer.ts b/src/uix/morfo/components/drawer.ts
index 5cbdc678c..d0f685079 100644
--- a/src/uix/morfo/components/drawer.ts
+++ b/src/uix/morfo/components/drawer.ts
@@ -200,7 +200,10 @@ export const drawerMorfo = {
 			role: 'button',
 			optional: false,
 			states: ['open', 'closed'],
-			data: [{ attr: 'data-state', values: ['open', 'closed'] }],
+			data: [
+				{ attr: 'data-state', values: ['open', 'closed'] },
+				{ attr: 'data-disabled', severity: 'optional' }
+			],
 			aria: [
 				{ attr: 'type', value: v.literal('button') },
 				{ attr: 'aria-haspopup', value: v.literal('dialog') },
@@ -231,6 +234,8 @@ export const drawerMorfo = {
 				{ attr: 'data-state', values: ['open', 'closed'], value: v.stateRef('open') },
 				{ attr: 'data-side', values: ['top', 'bottom', 'left', 'right'] },
 				{ attr: 'data-dragging', severity: 'optional' },
+				{ attr: 'data-nested', severity: 'optional' },
+				{ attr: 'data-nested-open', severity: 'optional' },
 				{
 					// Mirrors `data-variant` on the provider so recipe selectors
 					// can scope by variant directly on Content (`[data-drawer-content]
@@ -286,6 +291,8 @@ export const drawerMorfo = {
 			states: ['open', 'closed'],
 			data: [
 				{ attr: 'data-state', values: ['open', 'closed'], value: v.stateRef('open') },
+				{ attr: 'data-nested', severity: 'optional' },
+				{ attr: 'data-nested-open', severity: 'optional' },
 				{
 					// Overlay mirrors the provider's variant so the recipe can
 					// hide the backdrop in `'inline'` and `'persistent'` modes
diff --git a/src/uix/morfo/components/dropdown-menu.ts b/src/uix/morfo/components/dropdown-menu.ts
index d7288be96..877b0953a 100644
--- a/src/uix/morfo/components/dropdown-menu.ts
+++ b/src/uix/morfo/components/dropdown-menu.ts
@@ -89,7 +89,10 @@ export const dropdownMenuMorfo = {
 			defaultElement: 'div',
 			role: 'menuitem',
 			optional: false,
-			data: [{ attr: 'data-disabled', severity: 'optional' }],
+			data: [
+				{ attr: 'data-text-value', severity: 'optional' },
+				{ attr: 'data-disabled', severity: 'optional' }
+			],
 			aria: [
 				{
 					attr: 'aria-disabled',
@@ -110,6 +113,7 @@ export const dropdownMenuMorfo = {
 			states: ['checked', 'unchecked'],
 			data: [
 				{ attr: 'data-state', values: ['checked', 'unchecked'] },
+				{ attr: 'data-text-value', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' }
 			],
 			aria: [
@@ -144,6 +148,7 @@ export const dropdownMenuMorfo = {
 			states: ['checked', 'unchecked'],
 			data: [
 				{ attr: 'data-state', values: ['checked', 'unchecked'] },
+				{ attr: 'data-text-value', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' }
 			],
 			aria: [
@@ -176,6 +181,7 @@ export const dropdownMenuMorfo = {
 			states: ['open', 'closed'],
 			data: [
 				{ attr: 'data-state', values: ['open', 'closed'] },
+				{ attr: 'data-text-value', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' }
 			],
 			aria: [
diff --git a/src/uix/morfo/components/file-upload.ts b/src/uix/morfo/components/file-upload.ts
index 47a8b991b..2f67b9622 100644
--- a/src/uix/morfo/components/file-upload.ts
+++ b/src/uix/morfo/components/file-upload.ts
@@ -109,7 +109,10 @@ export const fileUploadMorfo = {
 			defaultElement: 'li',
 			role: 'listitem',
 			optional: true,
-			data: [],
+			data: [
+				{ attr: 'data-file-name' },
+				{ attr: 'data-file-type', severity: 'optional' }
+			],
 			aria: []
 		},
 		{
diff --git a/src/uix/morfo/components/grid-list.ts b/src/uix/morfo/components/grid-list.ts
index 3c20beede..2bd4e7a1c 100644
--- a/src/uix/morfo/components/grid-list.ts
+++ b/src/uix/morfo/components/grid-list.ts
@@ -81,6 +81,7 @@ export const gridListMorfo = {
 			data: [
 				{ attr: 'data-state', values: ['selected', 'unselected'] },
 				{ attr: 'data-value' },
+				{ attr: 'data-text-value', severity: 'optional' },
 				{ attr: 'data-highlighted', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' }
 			],
diff --git a/src/uix/morfo/components/listbox.ts b/src/uix/morfo/components/listbox.ts
index 7af16df50..cc33410c2 100644
--- a/src/uix/morfo/components/listbox.ts
+++ b/src/uix/morfo/components/listbox.ts
@@ -83,6 +83,7 @@ export const listboxMorfo = {
 			data: [
 				{ attr: 'data-state', values: ['selected', 'unselected'] },
 				{ attr: 'data-value' },
+				{ attr: 'data-text-value', severity: 'optional' },
 				{ attr: 'data-highlighted', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' },
 				{ attr: 'data-orientation', values: ['horizontal', 'vertical'] }
diff --git a/src/uix/morfo/components/select.ts b/src/uix/morfo/components/select.ts
index 74352b354..1ff060205 100644
--- a/src/uix/morfo/components/select.ts
+++ b/src/uix/morfo/components/select.ts
@@ -124,6 +124,8 @@ export const selectMorfo = {
 			data: [
 				{ attr: 'data-state', values: ['checked', 'unchecked'] },
 				{ attr: 'data-value' },
+				{ attr: 'data-label', severity: 'optional' },
+				{ attr: 'data-highlighted', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' }
 			],
 			aria: [
diff --git a/src/uix/morfo/components/tag-group.ts b/src/uix/morfo/components/tag-group.ts
index 409d72613..cfa667afd 100644
--- a/src/uix/morfo/components/tag-group.ts
+++ b/src/uix/morfo/components/tag-group.ts
@@ -77,6 +77,7 @@ export const tagGroupMorfo = {
 			data: [
 				{ attr: 'data-state', values: ['selected', 'unselected'] },
 				{ attr: 'data-value' },
+				{ attr: 'data-text-value', severity: 'optional' },
 				{ attr: 'data-highlighted', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' }
 			],
@@ -100,6 +101,7 @@ export const tagGroupMorfo = {
 			optional: true,
 			data: [
 				{ attr: 'data-value' },
+				{ attr: 'data-text-value', severity: 'optional' },
 				{ attr: 'data-highlighted', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' }
 			],
diff --git a/src/uix/morfo/components/time-picker.ts b/src/uix/morfo/components/time-picker.ts
index 21d96ba5e..74aadcb14 100644
--- a/src/uix/morfo/components/time-picker.ts
+++ b/src/uix/morfo/components/time-picker.ts
@@ -62,6 +62,27 @@ export const timePickerMorfo = {
 			states: ['open', 'closed'],
 			data: [{ attr: 'data-state', values: ['open', 'closed'] }],
 			aria: []
+		},
+		{
+			name: 'DayPeriodToggle',
+			kebab: 'day-period-toggle',
+			archetype: 'input',
+			kind: 'public',
+			defaultElement: 'div',
+			role: 'radiogroup',
+			optional: true,
+			data: [],
+			aria: []
+		},
+		{
+			name: 'DayPeriodItem',
+			kebab: 'day-period-item',
+			archetype: 'item',
+			kind: 'public',
+			defaultElement: 'label',
+			optional: true,
+			data: [{ attr: 'data-checked', severity: 'optional' }],
+			aria: []
 		}
 	]
 } as const satisfies Morfo;
diff --git a/src/uix/morfo/components/tree-grid.ts b/src/uix/morfo/components/tree-grid.ts
index e332b3655..55c58eec7 100644
--- a/src/uix/morfo/components/tree-grid.ts
+++ b/src/uix/morfo/components/tree-grid.ts
@@ -94,7 +94,9 @@ export const treeGridMorfo = {
 			data: [
 				{ attr: 'data-state', values: ['selected', 'unselected'] },
 				{ attr: 'data-value' },
+				{ attr: 'data-text-value', severity: 'optional' },
 				{ attr: 'data-expanded', values: ['true', 'false'], severity: 'optional' },
+				{ attr: 'data-has-children', values: ['true', 'false'], severity: 'optional' },
 				{ attr: 'data-highlighted', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' },
 				{ attr: 'data-level' }
diff --git a/src/uix/soma/components/drawer/drawer-provider.svelte.ts b/src/uix/soma/components/drawer/drawer-provider.svelte.ts
index eba2ba252..215267f12 100644
--- a/src/uix/soma/components/drawer/drawer-provider.svelte.ts
+++ b/src/uix/soma/components/drawer/drawer-provider.svelte.ts
@@ -96,8 +96,8 @@ interface DrawerOpts extends StateProps<DrawerStateFields>, ActiveProps<DrawerAc
  * a Handle part, side-resolution against Soma's `dir`. The morfo runtime
  * fires the prewrite → semantic.emit → handler cadence; component-specific
  * data-attrs (`data-side`, `data-dragging`, `data-nested*`) stay as inline
- * overrides in each part's `props` derived because they're not declared
- * with a `value:` source in the morfo today.
+ * overrides in each part's `props` derived; morfo declares them as contract,
+ * while the component owns their gesture/nesting calculations.
  */
 export class DrawerProvider {
 	static readonly ctx = context<DrawerProvider>('Drawer');
diff --git a/src/uix/soma/components/time-picker/components/time-picker-day-period-toggle.svelte b/src/uix/soma/components/time-picker/components/time-picker-day-period-toggle.svelte
index fb23ba6d5..4ddd51280 100644
--- a/src/uix/soma/components/time-picker/components/time-picker-day-period-toggle.svelte
+++ b/src/uix/soma/components/time-picker/components/time-picker-day-period-toggle.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { mergeProps } from '../../../props';
 	import { createId } from '../../../id';
-	import { TimePickerProvider } from '../time-picker-provider.svelte';
+	import { TimePickerProvider, timePickerAttrs } from '../time-picker-provider.svelte';
 	import { TIME_PICKER_LANGS } from '../langs';
 	import type { WithChild, Without } from '../../../types';
 	import type { PrimitiveDivAttributes } from '../../../types';
@@ -34,6 +34,7 @@
 
 	const mergedProps = $derived(
 		mergeProps(restProps, {
+			[timePickerAttrs['day-period-toggle']]: '',
 			role: 'radiogroup',
 			'aria-label': 'AM/PM',
 			'aria-disabled': disabled || undefined
@@ -45,9 +46,9 @@
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}
-		<div {...mergedProps} data-time-picker-day-period>
+		<div {...mergedProps}>
 			<label
-				data-time-picker-day-period-item
+				{...{ [timePickerAttrs['day-period-item']]: '' }}
 				data-checked={provider.dayPeriod === 'AM' ? '' : undefined}
 			>
 				<input
@@ -61,7 +62,7 @@
 				<span>{amLabel}</span>
 			</label>
 			<label
-				data-time-picker-day-period-item
+				{...{ [timePickerAttrs['day-period-item']]: '' }}
 				data-checked={provider.dayPeriod === 'PM' ? '' : undefined}
 			>
 				<input