<commit_before><div class="dummy-notification-container">
{{#each notifications as |notification|}}
  {{notification-message notification=notification}}
{{/each}}
</div>

<div class="dummy-body text-input field">

  <div class="section-title">Default</div>
  <hr>
  <div class="section">
    <div class="example">
      <div class="demo">
        {{! BEGIN-SNIPPET text }}
        {{frost-text}}
        {{! END-SNIPPET }}
      </div>
      <div class="snippet">
        {{code-snippet name='text.hbs'}}
      </div>
    </div>
  </div>

  <div class="section-title">State</div>
  <hr>
  <div class="section">
    <div class="example">
      <div class="title">error</div>
      <div class="demo">
        {{! BEGIN-SNIPPET text-error }}
        {{frost-text
          class="error"
          hook='myTextfield'
        }}
        {{! END-SNIPPET }}
      </div>
      <div class="snippet">
        {{code-snippet name='text-error.hbs'}}
      </div>
    </div>

    <div class="example">
      <div class="title">disabled</div>
      <div class="demo">
        {{! BEGIN-SNIPPET text-disabled }}
        {{frost-text
          disabled=true
          value="Disabled text"
        }}
        {{! END-SNIPPET }}
      </div>
      <div class="snippet">
        {{code-snippet name='text-disabled.hbs'}}
      </div>
    </div>
  </div>

  <div class="section-title">Options</div>
  <hr>
  <div class="section">
    <div class="example">
      <div class="title">placeholder</div>
      <div class="demo">
        {{! BEGIN-SNIPPET text-placeholder }}
        {{frost-text
          placeholder='Placeholder'
        }}
        {{! END-SNIPPET }}
      </div>
      <div class="snippet">
        {{code-snippet name='text-placeholder.hbs'}}
      </div>
    </div>

    <div class="example">
      <div class="title">align</div>
      <div class="demo">
        {{! BEGIN-SNIPPET text-align }}
        {{frost-text
          align='right'
        }}
        {{! END-SNIPPET }}
      </div>
      <div class="snippet">
        {{code-snippet name='text-align.hbs'}}
      </div>
    </div>
  </div>

  <div class="example">
    <div class="title">tabindex</div>
    <div class="demo">
      {{! BEGIN-SNIPPET text-tabindex }}
      {{frost-text
        tabindex='-1'
      }}
      {{! END-SNIPPET }}
    </div>
    <div class="snippet">
      {{code-snippet name='text-tabindex.hbs'}}
    </div>
  </div>

  <div class="section-title">Events</div>
  <hr>
  <div class='section'>
    <div class='example'>
      <div class='title'>Legacy events</div>
      <div class='demo'>
        {{! BEGIN-SNIPPET text-legacy-events }}
        {{frost-text
          onInput=(action 'legacy')
        }}
        {{! END-SNIPPET }}
      </div>
      <div class='snippet'>
         <div>Template</div>
        {{code-snippet name='text-legacy-events.hbs'}}
        <br>
        <div>Controller</div>
        {{code-snippet name='text-legacy-events.js'}}
      </div>
    </div>

    <div class="example"><commit_msg>added example of "readonly" under State section and "autofocus" under Options section in demo<commit_after><div class="dummy-notification-container">
{{#each notifications as |notification|}}
  {{notification-message notification=notification}}
{{/each}}
</div>

<div class="dummy-body text-input field">

  <div class="section-title">Default</div>
  <hr>
  <div class="section">
    <div class="example">
      <div class="demo">
        {{! BEGIN-SNIPPET text }}
        {{frost-text}}
        {{! END-SNIPPET }}
      </div>
      <div class="snippet">
        {{code-snippet name='text.hbs'}}
      </div>
    </div>
  </div>

  <div class="section-title">State</div>
  <hr>
  <div class="section">
    <div class="example">
      <div class="title">error</div>
      <div class="demo">
        {{! BEGIN-SNIPPET text-error }}
        {{frost-text
          class="error"
          hook='myTextfield'
        }}
        {{! END-SNIPPET }}
      </div>
      <div class="snippet">
        {{code-snippet name='text-error.hbs'}}
      </div>
    </div>

    <div class="example">
      <div class="title">disabled</div>
      <div class="demo">
        {{! BEGIN-SNIPPET text-disabled }}
        {{frost-text
          disabled=true
          value="Disabled text"
        }}
        {{! END-SNIPPET }}
      </div>
      <div class="snippet">
        {{code-snippet name='text-disabled.hbs'}}
      </div>
    </div>

    <div class="example">
      <div class="title">readonly</div>
      <div class="demo">
        {{! BEGIN-SNIPPET text-readonly }}
        {{frost-text
          readonly=true
          value="readonly"
        }}
        {{! END-SNIPPET }}
      </div>
      <div class="snippet">
        {{code-snippet name='text-readonly.hbs'}}
      </div>
    </div>
    
  </div>

  <div class="section-title">Options</div>
  <hr>
  <div class="section">
    <div class="example">
      <div class="title">placeholder</div>
      <div class="demo">
        {{! BEGIN-SNIPPET text-placeholder }}
        {{frost-text
          placeholder='Placeholder'
        }}
        {{! END-SNIPPET }}
      </div>
      <div class="snippet">
        {{code-snippet name='text-placeholder.hbs'}}
      </div>
    </div>

    <div class="example">
      <div class="title">align</div>
      <div class="demo">
        {{! BEGIN-SNIPPET text-align }}
        {{frost-text
          align='right'
        }}
        {{! END-SNIPPET }}
      </div>
      <div class="snippet">
        {{code-snippet name='text-align.hbs'}}
      </div>
    </div>
    <div class="example">
      <div class="title">tabindex</div>
      <div class="demo">
        {{! BEGIN-SNIPPET text-tabindex }}
        {{frost-text
          tabindex='-1'
        }}
        {{! END-SNIPPET }}
      </div>
      <div class="snippet">
        {{code-snippet name='text-tabindex.hbs'}}
      </div>
    </div>

    <div class="example">
      <div class="title">autofocus</div>
      <div class="demo">
        {{! BEGIN-SNIPPET text-autofocus }}
        {{frost-text
          autofocus=true
        }}
        {{! END-SNIPPET }}
      </div>
      <div class="snippet">
        {{code-snippet name='text-autofocus.hbs'}}
      </div>
    </div>

  </div>

  <div class="section-title">Events</div>
  <hr>
  <div class='section'>
    <div class='example'>
      <div class='title'>Legacy events</div>
      <div class='demo'>
        {{! BEGIN-SNIPPET text-legacy-events }}
        {{frost-text
          onInput=(action 'legacy')
        }}
        {{! END-SNIPPET }}
      </div>
      <div class='snippet'>
         <div>Template</div>
        {{code-snippet name='text-legacy-events.hbs'}}
        <br>
        <div>Controller</div>
        {{code-snippet name='text-legacy-events.js'}}
      </div>
    </div>

    <div class="example">
{'fraction_non_alphanumeric': 0.1880504991192014, 'fraction_numerical': 0.0002935995302407516, 'mean_word_length': 2.038804638715433, 'pattern_counts': {'":': 0, '<': 183, '<?xml version=': 0, '>': 183, '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': '7646014', 'n_tokens_mistral': 2316, 'n_tokens_neox': 2258, 'n_words': 393}