import type { Morfo } from '../types';

export const tabsMorfo: Morfo = {
	name: 'Tabs',
	kebab: 'tabs',
	scope: ['soma'],
	apg: 'https://www.w3.org/WAI/ARIA/apg/patterns/tabs/',
	parts: [
		{
			name: 'Provider',
			kebab: 'root',
			kind: 'public',
			defaultElement: 'div',
			optional: false,
			data: [
				{ attr: 'data-orientation', values: ['horizontal', 'vertical'] },
				{ attr: 'data-disabled', severity: 'optional' }
			],
			aria: []
		},
		{
			name: 'List',
			kebab: 'list',
			kind: 'public',
			defaultElement: 'div',
			optional: false,
			data: [{ attr: 'data-orientation', values: ['horizontal', 'vertical'] }],
			aria: []
		},
		{
			name: 'Trigger',
			kebab: 'trigger',
			kind: 'public',
			defaultElement: 'button',
			optional: false,
			states: ['active', 'inactive'],
			data: [
				{ attr: 'data-state', values: ['active', 'inactive'] },
				{ attr: 'data-disabled', severity: 'optional' },
				{ attr: 'data-orientation', values: ['horizontal', 'vertical'] }
			],
			aria: []
		},
		{
			name: 'Content',
			kebab: 'content',
			kind: 'public',
			defaultElement: 'div',
			optional: false,
			states: ['active', 'inactive'],
			data: [
				{ attr: 'data-state', values: ['active', 'inactive'] },
				{ attr: 'data-orientation', values: ['horizontal', 'vertical'] }
			],
			aria: []
		}
	]
};