<commit_before><!--
# tab-selector
Copyright ©2016-2017 <NAME>

The component's active_tab indicates the currently visible tab.
-->
<style>
	.tab-selector-bodies {
		border: 1px solid #ddd;
	}
	.tab-selector-bodies > * {
		display: none;
	}

	.tab-selector-bodies > .tab-selector-current {
		display: block;
	}

	.tab-selector-tabs {
		padding-top: 2px;
	}

	.tab-selector-tabs > .tab-selector-tab {
		padding: 3px 8px 2px;
		background-color: #ddd;
		display: inline-block;
		margin: 0 0 0 3px;
		border-radius: 4px 4px 0 0;
		border: 1px solid #ddd;
		border-bottom: 0;
		cursor: pointer;
	}

	.tab-selector-tabs > .tab-selector-tab:hover {
		background-color: #eee;
	}

	.tab-selector-tabs > .tab-selector-current {
		background-color: white;
		border: 1px solid #ddd;
		border-bottom: 1px solid white;
		margin-bottom: -1px;
	}
</style>
<div>
	<div class="tab-selector-tabs">
		<h4
			data-list="_component_.tabs"
			data-bind="text=.name;class(tab-selector-current)=.active"
			class="tab-selector-tab"
			data-event="
				mouseup,keydown(Space):_component_.select_tab;
				keydown(ArrowLeft):_component_.previous_tab;
				keydown(ArrowRight):_component_.next_tab
			"
			tabindex="0"
		>Tab Name</h4>
	</div>
	<div class="tab-selector-bodies" data-children>
		<div name="Tab A" style="text-align: center;">
			<span style="font-size: 200px; color: red;">A</span>
		</div>
		<div name="Tab B" style="text-align: center;">
			<span style="font-size: 200px; color: green;">B</span>
		</div>
		<div name="Tab C" style="text-align: center;">
			<span style="font-size: 200px; color: blue;">C</span>
		</div>
	</div>
</div>
<script>
/* global b8r, findOne, set, get, touch */
'use strict';
	const bodies = () => b8r.makeArray(findOne('.tab-selector-bodies').children);

	function select_tab(which) {
		if (which instanceof Event) {
			which = b8r.listIndex(which.target);
		}

		const active_tab = which || 0;

		set({active_tab});
		get('tabs').forEach((tab, idx) => tab.active = active_tab === idx);
		touch('tabs');
		const tabs = b8r.listItems(findOne('.tab-selector-tabs'));
		if (!tabs.length) {
			return;
		}

		tabs[active_tab].focus();

		bodies().forEach((body, idx) => {
			if (active_tab === idx) {
				body.classList.add('tab-selector-current');
				b8r.trigger('show', body);
			} else if (active_tab !== idx && body.classList.contains('tab-selector-current')) {
				body.classList.remove('tab-selector-current');
				b8r.trigger('hide', body);
			}
		});
	}

	set({
		tabs: bodies().map(element => { return { name: element.getAttribute('name') || element.getAttribute('title') || 'Untitled' }; }),
		select_tab,
		next_tab: () => select_tab((get('active_tab') + 1) % get('tabs').length),
		previous_tab: () => select_tab((get('active_tab') + get('tabs').length - 1) % get('tabs').length),
	});<commit_msg>Fix for the fix for the tab problem<commit_after><!--
# tab-selector
Copyright ©2016-2017 <NAME>

The component's active_tab indicates the currently visible tab.
-->
<style>
	.tab-selector-bodies {
		border: 1px solid #ddd;
	}
	.tab-selector-bodies > * {
		display: none;
	}

	.tab-selector-bodies > .tab-selector-current {
		display: block;
	}

	.tab-selector-tabs {
		padding-top: 2px;
	}

	.tab-selector-tabs > .tab-selector-tab {
		padding: 3px 8px 2px;
		background-color: #ddd;
		display: inline-block;
		margin: 0 0 0 3px;
		border-radius: 4px 4px 0 0;
		border: 1px solid #ddd;
		border-bottom: 0;
		cursor: pointer;
	}

	.tab-selector-tabs > .tab-selector-tab:hover {
		background-color: #eee;
	}

	.tab-selector-tabs > .tab-selector-current {
		background-color: white;
		border: 1px solid #ddd;
		border-bottom: 1px solid white;
		margin-bottom: -1px;
	}
</style>
<div>
	<div class="tab-selector-tabs">
		<h4
			data-list="_component_.tabs"
			data-bind="text=.name;class(tab-selector-current)=.active"
			class="tab-selector-tab"
			data-event="
				mouseup,keydown(Space):_component_.select_tab;
				keydown(ArrowLeft):_component_.previous_tab;
				keydown(ArrowRight):_component_.next_tab
			"
			tabindex="0"
		>Tab Name</h4>
	</div>
	<div class="tab-selector-bodies" data-children>
		<div name="Tab A" style="text-align: center;">
			<span style="font-size: 200px; color: red;">A</span>
		</div>
		<div name="Tab B" style="text-align: center;">
			<span style="font-size: 200px; color: green;">B</span>
		</div>
		<div name="Tab C" style="text-align: center;">
			<span style="font-size: 200px; color: blue;">C</span>
		</div>
	</div>
</div>
<script>
/* global b8r, findOne, set, get, touch */
'use strict';
	const bodies = () => b8r.makeArray(findOne('.tab-selector-bodies').children);

	function select_tab(which) {
		if (which instanceof Event) {
			which = b8r.listIndex(which.target);
		}

		const active_tab = which || 0;

		set({active_tab});
		get('tabs').forEach((tab, idx) => tab.active = active_tab === idx);
		touch('tabs');
		const tabs = b8r.listItems(findOne('.tab-selector-tabs'));
		if (tabs.length) {
			tabs[active_tab].focus();
		}


		bodies().forEach((body, idx) => {
			if (active_tab === idx) {
				body.classList.add('tab-selector-current');
				b8r.trigger('show', body);
			} else if (active_tab !== idx && body.classList.contains('tab-selector-current')) {
				body.classList.remove('tab-selector-current');
				b8r.trigger('hide', body);
			}
		});
	}

	set({
		tabs: bodies().map(element => { return { name: element.getAttribute('name') || element.getAttribute('title') || 'Untitled' }; }),
		select_tab,
		next_tab: () => select_tab((get('active_tab') + 1) % get('tabs').length),
		previous_tab: () => select_tab((get('active_tab') + get('tabs').length - 1) % get('tabs').length),
	});
{'fraction_non_alphanumeric': 0.18998761719441004, 'fraction_numerical': 0.01662833893507872, 'mean_word_length': 3.8615649183147034, 'pattern_counts': {'":': 0, '<': 53, '<?xml version=': 0, '>': 75, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '395758', 'n_tokens_mistral': 2349, 'n_tokens_neox': 2064, 'n_words': 408}