<commit_before><!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>basic-modes</title>

  <script src="../demos/lib/webcomponents.js"></script>
  <script src="../basic-arrow-selection/dist/basic-arrow-selection.js"></script>
  <script src="./dist/basic-modes.js"></script>

  <link rel="stylesheet" href="../demos/demos.css">

  <style>
  basic-arrow-selection {
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    height: 300px;
    max-width: 100%;
    width: 400px;
  }

  basic-modes {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    -webkit-flex: 1;
    flex: 1;
    -webkit-justify-content: center;
    justify-content: center;
  }
  </style>

</head>

<body>
  <basic-arrow-selection>
    <basic-modes aria-label="Panels">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </basic-modes>
  </basic-arrow-selection>
</body>

</html><commit_msg>Explanatory text for basic-modes demo.<commit_after><!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>basic-modes</title>

  <script src="../demos/lib/webcomponents.js"></script>
  <script src="../basic-arrow-selection/dist/basic-arrow-selection.js"></script>
  <script src="./dist/basic-modes.js"></script>

  <link rel="stylesheet" href="../demos/demos.css">

  <style>
  basic-arrow-selection {
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    height: 300px;
    max-width: 100%;
    width: 400px;
  }

  basic-modes {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    -webkit-flex: 1;
    flex: 1;
    -webkit-justify-content: center;
    justify-content: center;
  }
  </style>

</head>

<body>
  <p>
    The basic-modes component below shows a single selected page out of a set of
    pages. It provides no user interface of its own. Below, it's been combined
    with a basic-arrow-selection component to provide lateral navigation with
    buttons and the keyboard.
  </p>
  <basic-arrow-selection>
    <basic-modes aria-label="Panels">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </basic-modes>
  </basic-arrow-selection>
</body>

</html>
{'fraction_non_alphanumeric': 0.17331670822942644, 'fraction_numerical': 0.011637572734829594, 'mean_word_length': 3.0658783783783785, 'pattern_counts': {'":': 0, '<': 65, '<?xml version=': 0, '>': 65, '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': '2467094', 'n_tokens_mistral': 893, 'n_tokens_neox': 832, 'n_words': 173}