Declare interactive data attrs in morfos

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: [

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: [

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: [

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

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: [

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: []
 		},
 		{

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' }
 			],

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'] }

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: [

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' }
 			],

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;

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' }

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
+ * overrides in each part's `props` derived; morfo declares them as contract,
- * with a `value:` source in the morfo today.
+ * while the component owns their gesture/nesting calculations.
  */
 export class DrawerProvider {
 	static readonly ctx = context<DrawerProvider>('Drawer');

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