From caf208ade91031ce5abde5bb4b26dbd9a36bc04f Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Fri, 15 May 2026 04:02:14 +0200
Subject: [PATCH] Declare free value data attrs in morfos

---
 src/uix/morfo/components/calendar.ts          |  2 +
 src/uix/morfo/components/combobox.ts          |  1 +
 src/uix/morfo/components/command.ts           |  4 +-
 src/uix/morfo/components/drag-drop.ts         |  1 +
 src/uix/morfo/components/file-upload.ts       |  2 +-
 src/uix/morfo/components/grid-list.ts         |  1 +
 src/uix/morfo/components/listbox.ts           |  1 +
 src/uix/morfo/components/radio-group.ts       |  1 +
 src/uix/morfo/components/range-calendar.ts    |  2 +
 src/uix/morfo/components/select.ts            |  1 +
 src/uix/morfo/components/slider.ts            |  1 +
 src/uix/morfo/components/tabs.ts              |  1 +
 src/uix/morfo/components/tag-group.ts         |  2 +
 src/uix/morfo/components/tags-input.ts        |  1 +
 src/uix/morfo/components/time-range-picker.ts | 51 +++++++++++++++++++
 src/uix/morfo/components/toggle-group.ts      |  1 +
 src/uix/morfo/components/toolbar.ts           |  1 +
 src/uix/morfo/components/tree-grid.ts         |  1 +
 src/uix/morfo/components/tree-view.ts         |  3 ++
 ...time-range-picker-day-period-toggle.svelte |  9 ++--
 .../time-range-picker-hour-slider.svelte      |  3 +-
 .../time-range-picker-minute-slider.svelte    |  3 +-
 .../time-range-picker-second-slider.svelte    |  3 +-
 23 files changed, 87 insertions(+), 9 deletions(-)

diff --git a/src/uix/morfo/components/calendar.ts b/src/uix/morfo/components/calendar.ts
index fa86f8f35..91a33076b 100644
--- a/src/uix/morfo/components/calendar.ts
+++ b/src/uix/morfo/components/calendar.ts
@@ -198,6 +198,7 @@ export const calendarMorfo = {
 			role: 'gridcell',
 			optional: false,
 			data: [
+				{ attr: 'data-value' },
 				{ attr: 'data-selected', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' },
 				{ attr: 'data-unavailable', severity: 'optional' },
@@ -220,6 +221,7 @@ export const calendarMorfo = {
 			role: 'button',
 			optional: false,
 			data: [
+				{ attr: 'data-value' },
 				{ attr: 'data-selected', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' },
 				{ attr: 'data-unavailable', severity: 'optional' },
diff --git a/src/uix/morfo/components/combobox.ts b/src/uix/morfo/components/combobox.ts
index 767198a63..5fef9b9af 100644
--- a/src/uix/morfo/components/combobox.ts
+++ b/src/uix/morfo/components/combobox.ts
@@ -133,6 +133,7 @@ export const comboboxMorfo = {
 			states: ['checked', 'unchecked'],
 			data: [
 				{ attr: 'data-state', values: ['checked', 'unchecked'] },
+				{ attr: 'data-value' },
 				{ attr: 'data-disabled', severity: 'optional' }
 			],
 			aria: [
diff --git a/src/uix/morfo/components/command.ts b/src/uix/morfo/components/command.ts
index b8490e3ad..e28476dd1 100644
--- a/src/uix/morfo/components/command.ts
+++ b/src/uix/morfo/components/command.ts
@@ -80,6 +80,7 @@ export const commandMorfo = {
 			role: 'option',
 			optional: false,
 			data: [
+				{ attr: 'data-value' },
 				{ attr: 'data-selected', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' }
 			],
@@ -105,6 +106,7 @@ export const commandMorfo = {
 			role: 'option',
 			optional: true,
 			data: [
+				{ attr: 'data-value' },
 				{ attr: 'data-selected', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' }
 			],
@@ -178,7 +180,7 @@ export const commandMorfo = {
 			defaultElement: 'div',
 			role: 'progressbar',
 			optional: true,
-			data: [],
+			data: [{ attr: 'data-value' }],
 			aria: [
 				{ attr: 'aria-valuemin', value: v.literal('0') },
 				{ attr: 'aria-valuemax', value: v.literal('100') },
diff --git a/src/uix/morfo/components/drag-drop.ts b/src/uix/morfo/components/drag-drop.ts
index 9f03dc8d3..eef33c249 100644
--- a/src/uix/morfo/components/drag-drop.ts
+++ b/src/uix/morfo/components/drag-drop.ts
@@ -24,6 +24,7 @@ export const dragDropMorfo = {
 			role: 'button',
 			optional: false,
 			data: [
+				{ attr: 'data-value' },
 				{ attr: 'data-dragging', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' }
 			],
diff --git a/src/uix/morfo/components/file-upload.ts b/src/uix/morfo/components/file-upload.ts
index a2843fd19..47a8b991b 100644
--- a/src/uix/morfo/components/file-upload.ts
+++ b/src/uix/morfo/components/file-upload.ts
@@ -168,7 +168,7 @@ export const fileUploadMorfo = {
 			defaultElement: 'div',
 			role: 'progressbar',
 			optional: true,
-			data: [],
+			data: [{ attr: 'data-value' }],
 			aria: [
 				{ attr: 'aria-valuenow', value: v.propRef('percent') },
 				{ attr: 'aria-valuemin', value: v.literal('0') },
diff --git a/src/uix/morfo/components/grid-list.ts b/src/uix/morfo/components/grid-list.ts
index 23f05442c..3c20beede 100644
--- a/src/uix/morfo/components/grid-list.ts
+++ b/src/uix/morfo/components/grid-list.ts
@@ -80,6 +80,7 @@ export const gridListMorfo = {
 			states: ['selected', 'unselected'],
 			data: [
 				{ attr: 'data-state', values: ['selected', 'unselected'] },
+				{ attr: 'data-value' },
 				{ 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 fd05152ad..7af16df50 100644
--- a/src/uix/morfo/components/listbox.ts
+++ b/src/uix/morfo/components/listbox.ts
@@ -82,6 +82,7 @@ export const listboxMorfo = {
 			states: ['selected', 'unselected'],
 			data: [
 				{ attr: 'data-state', values: ['selected', 'unselected'] },
+				{ attr: 'data-value' },
 				{ attr: 'data-highlighted', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' },
 				{ attr: 'data-orientation', values: ['horizontal', 'vertical'] }
diff --git a/src/uix/morfo/components/radio-group.ts b/src/uix/morfo/components/radio-group.ts
index 630d4901b..aa6abb686 100644
--- a/src/uix/morfo/components/radio-group.ts
+++ b/src/uix/morfo/components/radio-group.ts
@@ -80,6 +80,7 @@ export const radioGroupMorfo = {
 			states: ['checked', 'unchecked'],
 			data: [
 				{ attr: 'data-state', values: ['checked', 'unchecked'], value: v.stateRef('checked') },
+				{ attr: 'data-value' },
 				{ attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' },
 				{
 					attr: 'data-orientation',
diff --git a/src/uix/morfo/components/range-calendar.ts b/src/uix/morfo/components/range-calendar.ts
index 6f095243f..de7cac66c 100644
--- a/src/uix/morfo/components/range-calendar.ts
+++ b/src/uix/morfo/components/range-calendar.ts
@@ -183,6 +183,7 @@ export const rangeCalendarMorfo = {
 			role: 'gridcell',
 			optional: false,
 			data: [
+				{ attr: 'data-value' },
 				{ attr: 'data-selected', severity: 'optional' },
 				{ attr: 'data-range-start', severity: 'optional' },
 				{ attr: 'data-range-end', severity: 'optional' },
@@ -211,6 +212,7 @@ export const rangeCalendarMorfo = {
 			role: 'button',
 			optional: false,
 			data: [
+				{ attr: 'data-value' },
 				{ attr: 'data-selected', severity: 'optional' },
 				{ attr: 'data-range-start', severity: 'optional' },
 				{ attr: 'data-range-end', severity: 'optional' },
diff --git a/src/uix/morfo/components/select.ts b/src/uix/morfo/components/select.ts
index b3dd9f468..74352b354 100644
--- a/src/uix/morfo/components/select.ts
+++ b/src/uix/morfo/components/select.ts
@@ -123,6 +123,7 @@ export const selectMorfo = {
 			states: ['checked', 'unchecked'],
 			data: [
 				{ attr: 'data-state', values: ['checked', 'unchecked'] },
+				{ attr: 'data-value' },
 				{ attr: 'data-disabled', severity: 'optional' }
 			],
 			aria: [
diff --git a/src/uix/morfo/components/slider.ts b/src/uix/morfo/components/slider.ts
index d304debeb..b3af23007 100644
--- a/src/uix/morfo/components/slider.ts
+++ b/src/uix/morfo/components/slider.ts
@@ -82,6 +82,7 @@ export const sliderMorfo = {
 			defaultElement: 'div',
 			optional: true,
 			data: [
+				{ attr: 'data-value' },
 				{ attr: 'data-orientation', values: ['horizontal', 'vertical'] },
 				{ attr: 'data-active', severity: 'optional' }
 			],
diff --git a/src/uix/morfo/components/tabs.ts b/src/uix/morfo/components/tabs.ts
index 63c5b0027..555d21aca 100644
--- a/src/uix/morfo/components/tabs.ts
+++ b/src/uix/morfo/components/tabs.ts
@@ -64,6 +64,7 @@ export const tabsMorfo = {
 			states: ['active', 'inactive'],
 			data: [
 				{ attr: 'data-state', values: ['active', 'inactive'], value: v.stateRef('active') },
+				{ attr: 'data-value' },
 				{ attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' },
 				{
 					attr: 'data-orientation',
diff --git a/src/uix/morfo/components/tag-group.ts b/src/uix/morfo/components/tag-group.ts
index 6c9e19391..409d72613 100644
--- a/src/uix/morfo/components/tag-group.ts
+++ b/src/uix/morfo/components/tag-group.ts
@@ -76,6 +76,7 @@ export const tagGroupMorfo = {
 			states: ['selected', 'unselected'],
 			data: [
 				{ attr: 'data-state', values: ['selected', 'unselected'] },
+				{ attr: 'data-value' },
 				{ attr: 'data-highlighted', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' }
 			],
@@ -98,6 +99,7 @@ export const tagGroupMorfo = {
 			role: 'row',
 			optional: true,
 			data: [
+				{ attr: 'data-value' },
 				{ attr: 'data-highlighted', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' }
 			],
diff --git a/src/uix/morfo/components/tags-input.ts b/src/uix/morfo/components/tags-input.ts
index b6fce16fa..bd6a14e40 100644
--- a/src/uix/morfo/components/tags-input.ts
+++ b/src/uix/morfo/components/tags-input.ts
@@ -77,6 +77,7 @@ export const tagsInputMorfo = {
 			states: ['active', 'inactive'],
 			data: [
 				{ attr: 'data-state', values: ['active', 'inactive'] },
+				{ attr: 'data-value' },
 				{ attr: 'data-highlighted', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' }
 			],
diff --git a/src/uix/morfo/components/time-range-picker.ts b/src/uix/morfo/components/time-range-picker.ts
index 559a4cbbe..e5119a8b0 100644
--- a/src/uix/morfo/components/time-range-picker.ts
+++ b/src/uix/morfo/components/time-range-picker.ts
@@ -44,6 +44,57 @@ export const timeRangePickerMorfo = {
 					severity: 'recommended'
 				}
 			]
+		},
+		{
+			name: 'HourSlider',
+			kebab: 'hour-slider',
+			archetype: 'input',
+			kind: 'public',
+			defaultElement: 'div',
+			optional: true,
+			data: [{ attr: 'data-endpoint', values: ['start', 'end'] }],
+			aria: []
+		},
+		{
+			name: 'MinuteSlider',
+			kebab: 'minute-slider',
+			archetype: 'input',
+			kind: 'public',
+			defaultElement: 'div',
+			optional: true,
+			data: [{ attr: 'data-endpoint', values: ['start', 'end'] }],
+			aria: []
+		},
+		{
+			name: 'SecondSlider',
+			kebab: 'second-slider',
+			archetype: 'input',
+			kind: 'public',
+			defaultElement: 'div',
+			optional: true,
+			data: [{ attr: 'data-endpoint', values: ['start', 'end'] }],
+			aria: []
+		},
+		{
+			name: 'DayPeriodToggle',
+			kebab: 'day-period-toggle',
+			archetype: 'input',
+			kind: 'public',
+			defaultElement: 'div',
+			role: 'radiogroup',
+			optional: true,
+			data: [{ attr: 'data-endpoint', values: ['start', 'end'] }],
+			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/toggle-group.ts b/src/uix/morfo/components/toggle-group.ts
index 551ff2e4f..ff4975579 100644
--- a/src/uix/morfo/components/toggle-group.ts
+++ b/src/uix/morfo/components/toggle-group.ts
@@ -35,6 +35,7 @@ export const toggleGroupMorfo = {
 			states: ['on', 'off'],
 			data: [
 				{ attr: 'data-state', values: ['on', 'off'], value: v.stateRef('on') },
+				{ attr: 'data-value' },
 				{ attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' },
 				{
 					attr: 'data-orientation',
diff --git a/src/uix/morfo/components/toolbar.ts b/src/uix/morfo/components/toolbar.ts
index 56ad7bd25..1edd7b907 100644
--- a/src/uix/morfo/components/toolbar.ts
+++ b/src/uix/morfo/components/toolbar.ts
@@ -100,6 +100,7 @@ export const toolbarMorfo = {
 			states: ['on', 'off'],
 			data: [
 				{ attr: 'data-state', values: ['on', 'off'], value: v.stateRef('on') },
+				{ attr: 'data-value' },
 				{ attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' },
 				{
 					attr: 'data-orientation',
diff --git a/src/uix/morfo/components/tree-grid.ts b/src/uix/morfo/components/tree-grid.ts
index 0ee8fa6e8..e332b3655 100644
--- a/src/uix/morfo/components/tree-grid.ts
+++ b/src/uix/morfo/components/tree-grid.ts
@@ -93,6 +93,7 @@ export const treeGridMorfo = {
 			states: ['selected', 'unselected'],
 			data: [
 				{ attr: 'data-state', values: ['selected', 'unselected'] },
+				{ attr: 'data-value' },
 				{ attr: 'data-expanded', values: ['true', 'false'], severity: 'optional' },
 				{ attr: 'data-highlighted', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' },
diff --git a/src/uix/morfo/components/tree-view.ts b/src/uix/morfo/components/tree-view.ts
index 6aa33c056..11cdf3ccc 100644
--- a/src/uix/morfo/components/tree-view.ts
+++ b/src/uix/morfo/components/tree-view.ts
@@ -51,6 +51,7 @@ export const treeViewMorfo = {
 			states: ['open', 'closed'],
 			data: [
 				{ attr: 'data-state', values: ['open', 'closed'] },
+				{ attr: 'data-value' },
 				{ attr: 'data-selected', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' },
 				{ attr: 'data-depth' }
@@ -81,6 +82,7 @@ export const treeViewMorfo = {
 			states: ['open', 'closed'],
 			data: [
 				{ attr: 'data-state', values: ['open', 'closed'] },
+				{ attr: 'data-value' },
 				{ attr: 'data-selected', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' }
 			],
@@ -127,6 +129,7 @@ export const treeViewMorfo = {
 			role: 'treeitem',
 			optional: false,
 			data: [
+				{ attr: 'data-value' },
 				{ attr: 'data-selected', severity: 'optional' },
 				{ attr: 'data-disabled', severity: 'optional' },
 				{ attr: 'data-depth' }
diff --git a/src/uix/soma/components/time-range-picker/components/time-range-picker-day-period-toggle.svelte b/src/uix/soma/components/time-range-picker/components/time-range-picker-day-period-toggle.svelte
index 4f4842dae..f0e007468 100644
--- a/src/uix/soma/components/time-range-picker/components/time-range-picker-day-period-toggle.svelte
+++ b/src/uix/soma/components/time-range-picker/components/time-range-picker-day-period-toggle.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { mergeProps } from '../../../props';
 	import { createId } from '../../../id';
-	import { TimeRangePickerProvider } from '../time-range-picker-provider.svelte';
+	import { TimeRangePickerProvider, timeRangePickerAttrs } from '../time-range-picker-provider.svelte';
 	import { TIME_RANGE_PICKER_LANGS } from '../langs';
 	import type { TimeRangePickerDayPeriodToggleProps } from '../types';
 
@@ -29,6 +29,7 @@
 
 	const mergedProps = $derived(
 		mergeProps(restProps, {
+			[timeRangePickerAttrs['day-period-toggle']]: '',
 			role: 'radiogroup',
 			'aria-label': 'AM/PM',
 			'aria-disabled': disabled || undefined,
@@ -41,9 +42,9 @@
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}
-		<div {...mergedProps} data-time-range-picker-day-period>
+		<div {...mergedProps}>
 			<label
-				data-time-range-picker-day-period-item
+				{...{ [timeRangePickerAttrs['day-period-item']]: '' }}
 				data-checked={provider.getDayPeriod(type) === 'AM' ? '' : undefined}
 			>
 				<input
@@ -60,7 +61,7 @@
 				<span>{amLabel}</span>
 			</label>
 			<label
-				data-time-range-picker-day-period-item
+				{...{ [timeRangePickerAttrs['day-period-item']]: '' }}
 				data-checked={provider.getDayPeriod(type) === 'PM' ? '' : undefined}
 			>
 				<input
diff --git a/src/uix/soma/components/time-range-picker/components/time-range-picker-hour-slider.svelte b/src/uix/soma/components/time-range-picker/components/time-range-picker-hour-slider.svelte
index 095906762..699e304da 100644
--- a/src/uix/soma/components/time-range-picker/components/time-range-picker-hour-slider.svelte
+++ b/src/uix/soma/components/time-range-picker/components/time-range-picker-hour-slider.svelte
@@ -6,7 +6,7 @@
 	import { mergeProps } from '../../../props';
 	import { createId } from '../../../id';
 	import { SliderProvider } from '../../slider/slider-provider.svelte';
-	import { TimeRangePickerProvider } from '../time-range-picker-provider.svelte';
+	import { TimeRangePickerProvider, timeRangePickerAttrs } from '../time-range-picker-provider.svelte';
 	import { TIME_RANGE_PICKER_LANGS } from '../langs';
 	import type { TimeRangePickerSliderProps } from '../types';
 
@@ -66,6 +66,7 @@
 
 	const mergedProps = $derived(
 		mergeProps(restProps, state.props, {
+			[timeRangePickerAttrs['hour-slider']]: '',
 			'aria-label': label,
 			'data-endpoint': type
 		} as Record<string, unknown>)
diff --git a/src/uix/soma/components/time-range-picker/components/time-range-picker-minute-slider.svelte b/src/uix/soma/components/time-range-picker/components/time-range-picker-minute-slider.svelte
index 1376e58e0..2490269ff 100644
--- a/src/uix/soma/components/time-range-picker/components/time-range-picker-minute-slider.svelte
+++ b/src/uix/soma/components/time-range-picker/components/time-range-picker-minute-slider.svelte
@@ -6,7 +6,7 @@
 	import { mergeProps } from '../../../props';
 	import { createId } from '../../../id';
 	import { SliderProvider } from '../../slider/slider-provider.svelte';
-	import { TimeRangePickerProvider } from '../time-range-picker-provider.svelte';
+	import { TimeRangePickerProvider, timeRangePickerAttrs } from '../time-range-picker-provider.svelte';
 	import { TIME_RANGE_PICKER_LANGS } from '../langs';
 	import type { TimeRangePickerSliderProps } from '../types';
 
@@ -66,6 +66,7 @@
 
 	const mergedProps = $derived(
 		mergeProps(restProps, state.props, {
+			[timeRangePickerAttrs['minute-slider']]: '',
 			'aria-label': label,
 			'data-endpoint': type
 		} as Record<string, unknown>)
diff --git a/src/uix/soma/components/time-range-picker/components/time-range-picker-second-slider.svelte b/src/uix/soma/components/time-range-picker/components/time-range-picker-second-slider.svelte
index 4c2ab0c97..db81d0e95 100644
--- a/src/uix/soma/components/time-range-picker/components/time-range-picker-second-slider.svelte
+++ b/src/uix/soma/components/time-range-picker/components/time-range-picker-second-slider.svelte
@@ -6,7 +6,7 @@
 	import { mergeProps } from '../../../props';
 	import { createId } from '../../../id';
 	import { SliderProvider } from '../../slider/slider-provider.svelte';
-	import { TimeRangePickerProvider } from '../time-range-picker-provider.svelte';
+	import { TimeRangePickerProvider, timeRangePickerAttrs } from '../time-range-picker-provider.svelte';
 	import { TIME_RANGE_PICKER_LANGS } from '../langs';
 	import type { TimeRangePickerSliderProps } from '../types';
 
@@ -66,6 +66,7 @@
 
 	const mergedProps = $derived(
 		mergeProps(restProps, state.props, {
+			[timeRangePickerAttrs['second-slider']]: '',
 			'aria-label': label,
 			'data-endpoint': type
 		} as Record<string, unknown>)